js 弹出遮罩层

最新推荐文章于 2021-08-05 14:22:45 发布
最新推荐文章于 2021-08-05 14:22:45 发布
阅读量236 收藏
点赞数
分类专栏： js 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenwennihao/article/details/84545105
版权


<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>mask</title>
    <style type="text/css">
      #newDiv
      {
           
      }
    </style>
</head>
<body>

    <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=10)";
            newMask.style.opacity = "0.20";
            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  style="cursor: pointer">点击弹出遮罩层</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 />
    </body>
    <script type="text/javascript">
     openNewDiv('newDiv');
    </script>
</html>

 

wenwennihao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
10-16
主要介绍了JavaScript实现的弹出遮罩层特效,结合实例形式分析了基于jQuery实现的页面元素与属性动态操作相关使用技巧,需要的朋友可以参考下
通过JS弹出一个等待对话框(以及遮罩层)提示用户
J1271820107的博客
08-24 5198
/*显示提示信息 */ function load() { $("").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body"); $("").html("正在导入数据，请稍候。。。").appendTo("body").css({ display: "blo
js遮罩层效果
weixin_30832983的博客
08-29 108
<!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弹出遮罩层
weixin_30872867的博客
05-04 86
html代码： View Code <!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/xhtm...
js+css实现遮罩层的效果
qq_43682422的博客
08-05 1309
一、上图 二、原理 1.预先在html里写出遮罩层的样式和对话框的样式，并让他们display为none，通过按钮点击事件绑定js函数修改他们的display为block则可以实现这样的效果。 2.注意的小细节，为了保证对话框在遮罩层的上面，则需要使用z-index让对话框的优先级大于遮罩层，同时遮罩层的优先级也要大于原来的页面才能实现遮罩。 三、代码部分 1.html <!-- 这是遮罩层 --> <div id="pageShadow"></div&g
JS移动端点击弹出遮罩层
07-03
Javascript实现移动端点击按钮弹出遮罩层，自适应移动端屏幕大小。
JS弹出遮罩层
11-28
用JS弹出一个遮罩层，可用天登录、注册 绝对实用
js实现遮罩层弹出框的方法
10-24
主要介绍了js实现遮罩层弹出框的方法,可实现对遮罩层弹出框的样式定义、按钮事件及相关功能的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js弹出div并显示遮罩层
10-26
弹出div显示遮罩层的效果，想必大家都有见到过吧，下面有个示例，大家可以参考下
JS遮罩层完美弹出Div(滚动条不可动)
12-11
用JS遮罩层完美弹出Div，并且滚动条完美屏蔽掉。。绝对是您完美的学习例子
弹出遮罩层，纯JS效果，可自定义背景
12-31
纯JS的遮罩层，可自行设置效果已经定位位置等
js弹出遮罩层效果
11-19
资源很好,很实用,代码少简单易懂,很随时用在项目中,并且使用的效果也很好!
javascript弹出遮罩层
VictorZhang
03-26 667
项目经常需要自定义弹出层，代码如下 function maskDiv() { var divmask = document.createElement("div"); divmask.id = "div-mask"; divmask.style.width = Math.max(doc
js 弹出层遮罩
lins1393997412的专栏
03-07 1347
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   *{margin:0;padding: 0;}   body{height: 1000px;}   #txt {background-color: green;padding: 5px;line-height: 1.5;color: #fff;}     .prompShadeDiv{display:none;posit
jQuery点击弹出遮罩层
最新发布
06-06
使用jQuery可以更加方便地实现弹出遮罩层的效果，具体步骤如下： 1. 在HTML文件中引入jQuery库和自定义的CSS文件。例如： ``` <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值