js弹出层与遮罩层

最新推荐文章于 2016-09-01 12:53:00 发布
最新推荐文章于 2016-09-01 12:53:00 发布
阅读量637 收藏
点赞数
分类专栏： Javascript 文章标签： scroll function div c

<script type="text/javascript">
var docEle = function() 
{
    return document.getElementById(arguments[0]) || false;
}

function openNewDiv(_id) 
{
    var m = "mask";
    if (docEle(_id)) document.body.removeChild(docEle(_id));
    if (docEle(m)) document.body.removeChild(docEle(m));
    
    //mask遮罩层

    var newMask = document.createElement("div");
    newMask.id = m;
    newMask.style.position = "absolute";
    newMask.style.zIndex = "1";
    _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
    _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
    newMask.style.width = _scrollWidth + "px";
    newMask.style.height = _scrollHeight + "px";
    newMask.style.top = "0px";
    newMask.style.left = "0px";
    newMask.style.background = "#33393C";
    newMask.style.filter = "alpha(opacity=40)";
    newMask.style.opacity = "0.40";
    document.body.appendChild(newMask);
    
    //新弹出层

    var newDiv = document.createElement("div");
    newDiv.id = _id;
    newDiv.style.position = "absolute";
    newDiv.style.zIndex = "9999";
    newDivWidth = 400;
    newDivHeight = 200;
    newDiv.style.width = newDivWidth + "px";
    newDiv.style.height = newDivHeight + "px";
    newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
    newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
    newDiv.style.background = "#EFEFEF";
    newDiv.style.border = "1px solid #860001";
    newDiv.style.padding = "5px";
    newDiv.innerHTML = "弹出层内容 "; 
    document.body.appendChild(newDiv);
    
    //弹出层滚动居中

    function newDivCenter()
    {
        newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
        newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
    }
    if(document.all)
    {
        window.attachEvent("onscroll",newDivCenter);
    }
    else
    {
        window.addEventListener('scroll',newDivCenter,false);
    }
    
    //关闭新图层和mask遮罩层

    var newA = document.createElement("a");
    newA.href = "#";
    newA.innerHTML = "关闭";
    newA.onclick = function() 
    {
        if(document.all)
        {
            window.detachEvent("onscroll",newDivCenter);
        }
        else
        {
            window.removeEventListener('scroll',newDivCenter,false);
        }
        document.body.removeChild(docEle(_id));
        document.body.removeChild(docEle(m));
        return false;
    }
    newDiv.appendChild(newA);
}
</script>
<body>
<a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">qifei弹层</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">qifei弹层</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">qifei弹层</a>
</body>

aidenliu
关注
专栏目录
js 弹出遮罩层
08-05
NULL 博文链接：https://shoushounihao.iteye.com/blog/2040545
js点击按钮实现带遮罩层的弹出视频效果
10-23
总结来说，实现点击按钮弹出带遮罩层的视频效果涉及的IT知识点包括HTML结构的编写、CSS样式的设计以及JavaScript事件处理。通过上述三个部分的详细介绍和实现，我们可以获得一个在用户点击按钮后弹出视频，并且在...
js弹出遮罩层
weixin_30552635的博客
12-11 81
js弹出层，并且遮罩下面内容， [ 注意，这里button为input其中的一种类型，不要换] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://w...
layer弹出层取消遮罩的方法
12-13
在网页开发中，有时我们需要创建弹出层来展示信息或者进行交互操作，layer是一个非常流行的JavaScript弹层插件，尤其在layui框架中被广泛应用。layer提供了丰富的弹出层样式和功能，包括模态对话框、提示信息、加载...
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
10-27
这种方法可以有效地聚焦用户的注意力到弹出层上，同时遮罩层可以避免用户与页面上的其他元素进行交互。 首先需要明确的是，对于弹出层的实现，我们需要掌握JavaScript的基础知识，比如DOM操作、事件监听以及CSS样式...
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
10-16
本文档将介绍如何使用JavaScript和jQuery实现弹出遮罩层特效，并对页面元素以及属性进行动态操作。 首先，了解遮罩层特效的基本概念，这是在用户与网页交互时，为了增强用户体验而临时覆盖在页面上的一种半透明层。...
js弹出div并显示遮罩层
10-26
弹出div显示遮罩层的效果，想必大家都有见到过吧，下面有个示例，大家可以参考下
JS移动端点击弹出遮罩层
07-03
Javascript实现移动端点击按钮弹出遮罩层，自适应移动端屏幕大小。
弹出遮罩层，纯JS效果，可自定义背景
12-31
纯JS的遮罩层，可自行设置效果已经定位位置等
JS遮罩层完美弹出Div(滚动条不可动)
12-11
用JS遮罩层完美弹出Div，并且滚动条完美屏蔽掉。。绝对是您完美的学习例子
js遮罩层效果
weixin_30832983的博客
08-29 132
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta...
js 弹出层遮罩
lins1393997412的专栏
03-07 1381
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   *{margin:0;padding: 0;}   body{height: 1000px;}   #txt {background-color: green;padding: 5px;line-height: 1.5;color: #fff;}     .prompShadeDiv{display:none;posit
JS弹出遮罩层
weixin_30367543的博客
09-01 63
// create div var mask=document.createElement("div"); mask.id="mask"; mask.style.position="absolute"; mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=25)";//IE的不透明设置 ...
jQuery实现弹出层与遮罩效果
// 显示遮罩层与弹出层 function showBg() { var bh = $("body").height(); // 获取页面body的高度 var bw = $("body").width(); // 获取页面body的宽度 $("#fullbg").css({ // 设置遮罩层的尺寸并显示 height: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值