js弹出遮层
<script>
var docEle = function () {
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id) {
var m = "mask";
if (docEle(_id)) document.removeChild(docEle(_id));
if (docEle(m)) document.removeChild(docEle(m));
// www.codefans.net 新激活图层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDiv.style.width = "200px";
newDiv.style.height = "300px";
newDiv.style.top = "100px";
newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中
newDiv.style.background = "EEEEEE";
newDiv.style.border = "1px solid #0066cc";
newDiv.style.padding = "5px";
newDiv.innerHTML = "此内容为新激活的弹窗";
document.body.appendChild(newDiv);
// mask图层
var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
newMask.style.width = document.body.scrollWidth + "px";
newMask.style.height = document.body.scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#000";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask);
// docutment www.codefans.net
// 关闭mask和新图层
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "关闭激活层";
newA.onclick = function () {
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
newDiv.appendChild(newA);
}
</script>
<a href="#" onclick="openNewDiv(this);return false;">弹出新层</a>
js弹出遮层的更多相关文章
- js弹出div层,弹出层页面底部出现UL出现一条线问题
整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...
- js 弹出 隐藏层和cookie
<script type="text/javascript"> function checkCookie(show_div, bg_div) { var smtstk ...
- js弹出div层内容(按回退键关闭div层及遮罩)
<!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...
- JS弹出遮罩层
// create div var mask=document.createElement("div"); mask.id="mask"; mask.style ...
- JS 点击按钮后弹出遮罩层,有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- js弹出层
js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...
- 【JS新手教程】浏览器弹出div层1
JS中,可以弹出一个层来进行提示等作用,方法是利用css样式display样式,当display等于none时,该元素就不会在页面显示出来,而且元素也不会占空间.就是用户触发某些事件时,动态修改该样式 ...
- 【JS新手教程】弹出两层div,及在LODOP内嵌上层
前面的博文有个简单的弹出div层[JS新手教程]浏览器弹出div层1,有一层,不过为了提示,一般会不让用户可以点击该提示之外的地方的.如果让用户弹出层后,把其他的按钮和链接都设置不可用应该比较麻烦,如 ...
- div+js 弹出层
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
随机推荐
- 部署网络存储ISCSI
1.什么是ISCSIInternet Small Computer System Interface 互联网小型计算机接口技术,是一种将SCS存储与以太网技术相结合,可以用来在互联网中传输SCSI接口 ...
- iOS 错误 undefined symbols for architecture i386
undefined symbols for architecture i386 这个错误困扰了我几个小时. 网上很多问这个问题的,回答基本上都是说在 target 里面去的 armv64 什么什么的. ...
- 【ocp-12c】最新Oracle OCP-071考试题库(41题)
41.(8-14) choose two View the Exhibit and examine the structure of the ORDERS table. The columns ORD ...
- “全栈2019”Java异常第二章:如何处理异常?
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...
- Bootstrap框架常用总结
Bootstrap框架常用标签: 标题标签:<h1>-<h6> bootstrap中也设置的相同的样式 - 若要使用 必须使用空标签来定义 比如<s ...
- Java Web 学习与总结(二)Servlet核心接口+Servlet3.0配置
Servlet3.0版本对Servlet配置进行了重大变革,Servlet类不需要再麻烦的去编辑web.xml文件了,只需要在类上面进行注释就可以了,获得了 Java 社区的一片赞誉之声,以下是新增的 ...
- php防止网站被刷新
在实际应用中,总会遇到某些页面被恶意用户刷新.当你的系统在某些模块没有使用缓存的时候,频繁的刷新会导致数据库吃紧.下面附上一段代码,防止频繁的刷新造成的死机情况. 主要是从 session方面进行限制 ...
- 8102 年的现代 Web 开发最佳实践(笑)
简评:8102 年了,现在 web 开发的最佳实践是什么,让本文来告诉你.原文只提到一部分,可以查看 reddit 上对此文的评论查看补充的最佳实践 https://old.reddit.com/r/ ...
- docker 实例设置自动重启
yaml格式太严格了,每个冒号后面都必须带有空格在linux中./代表当前目录,属于相对路径../代表上一级目录,属于相对路径/代表根目录,/开头的文件都是绝对路径./configure的意思是执行当 ...
- iOS学习笔记(5)——显示简单的TableView
1. 创建工程 创建一个新的Xcode工程命名为SimpleTableTest. 删除main.storyboard文件和info.plist中有关storyboard的相关属性. 按command+ ...