<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弹出遮层的更多相关文章

  1. js弹出div层,弹出层页面底部出现UL出现一条线问题

    整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...

  2. js 弹出 隐藏层和cookie

    <script type="text/javascript"> function checkCookie(show_div, bg_div) { var smtstk ...

  3. js弹出div层内容(按回退键关闭div层及遮罩)

    <!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...

  4. JS弹出遮罩层

    // create div var mask=document.createElement("div"); mask.id="mask"; mask.style ...

  5. JS 点击按钮后弹出遮罩层,有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  6. js弹出层

    js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...

  7. 【JS新手教程】浏览器弹出div层1

    JS中,可以弹出一个层来进行提示等作用,方法是利用css样式display样式,当display等于none时,该元素就不会在页面显示出来,而且元素也不会占空间.就是用户触发某些事件时,动态修改该样式 ...

  8. 【JS新手教程】弹出两层div,及在LODOP内嵌上层

    前面的博文有个简单的弹出div层[JS新手教程]浏览器弹出div层1,有一层,不过为了提示,一般会不让用户可以点击该提示之外的地方的.如果让用户弹出层后,把其他的按钮和链接都设置不可用应该比较麻烦,如 ...

  9. div+js 弹出层

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

随机推荐

  1. 索引+sql优化

    索引的概念: 索引是提高查询速度的一种手段.索引有很多种,以下是索引树的结构 要求查询出薪资大于5000的雇员信息,只要在树中找到5000的节点,直接查询该节点右边的数据即可,左边就不用管了,这样提高 ...

  2. Python简单登录密码比对

    # 源于Github的一段源码,编写的比较规范,应该是专业选手! # encoding:utf-8 __author__ = 'www.yeayee.com' # 由本站增加注释,可随意Fork.Co ...

  3. jmeter+ant+jenkins+mac报告优化(一):解决Min Time和Max Time显示NaN

    一.在上篇博客中生成的报告有两个问题: 1.date not defined 2.Min Time和Max Time显示成了NaN 二.Jmeter+Ant报告生成原理: 1.在Jmeter的extr ...

  4. 前端必学内容:webpack3快速入门 1-23节内容参考

    前端必学内容:webpack(模块打包器) webpack3 学习内容,点击即可到达 (1).webpack快速入门——如何安装webpack及注意事项 (2).webpack快速入门——webpac ...

  5. 爬虫实战2:爬头条网美图--Ajax图片加载处理

    完整代码经测试可成功运行,目的是抓取头条网输入街拍后的图片,涉及的知识点如下 1. md5加密使用方法 方法1:不创建实例对象,直接使用 >>> from hashlib impor ...

  6. set,env和export命令显示shell变量其区别,与环境变量扫盲(一)

    种类: ♦ set     :  用来显示本地变量,显示当前shell的变量,包括当前用户的变量 ♦ env    :  用来显示环境变量,显示当前用户的变量. ♦ export:  用来显示和设置环 ...

  7. oracle创建表空间、用户、权限

    原链接:https://www.cnblogs.com/wxm-bk/p/6510654.html oracle 创建临时表空间/表空间,用户及授权   1:创建临时表空间 create tempor ...

  8. delphi 10.2 ----简单的递归函数例子求和

    unit Unit10; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syste ...

  9. string常用字符串操作函数

    1.strdup和strndup 说明:strdup() 函数将参数 s 指向的字符串复制到一个字符串指针上去,这个字符串指针事先可以没被初始化.在复制时,strdup() 会给这个指针分配空间,使用 ...

  10. mysql工具——mysqlcheck(MYISAM)

    基本介绍 演示: 使用optimize的时候,可能会出现 Table does not support optimize, doing recreate + analyze instead 这时候参考 ...