`
shoushounihao
  • 浏览: 41414 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js 弹出遮罩层

    博客分类:
  • js
 
阅读更多


<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>

 

分享到:
评论

相关推荐

    JavaScript弹出遮罩层

    JavaScript弹出遮罩层是前端开发中的基本技巧,它涉及到DOM操作、事件处理、样式控制等多个方面,而`ShowDiv.js`正是这些功能的实现载体。理解并掌握这种技术对于提升网页的交互性和用户体验至关重要。

    JS弹出遮罩层

    &lt;title&gt;JS弹出遮罩层 .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; z-index: 9999; } .modal { position: fixed;...

    js弹出遮罩层

    在网页设计中,"js弹出遮罩层"是一个常见的功能,它允许用户与特定的交互元素进行互动,而暂时屏蔽掉页面上的其他内容。这种技术可以用于显示警告信息、模态对话框、加载提示或者任何需要用户关注的特殊内容。在...

    js弹出遮罩层效果

    JS弹出遮罩层效果 在Web开发中,弹出遮罩层效果是一个非常常见的交互方式,能够吸引用户的注意,并提供更好的用户体验。本资源提供了一种简单易用的JS弹出遮罩层效果,能够满足大多数项目的需求。 以下是该效果的...

    javascript 弹出遮罩层,弹出半透明的遮罩层并显示注册文本框内容

    javascript 弹出遮罩层,弹出半透明的遮罩层并显示注册文本框内容,让网页更生动

    JS移动端点击弹出遮罩层

    "JS移动端点击弹出遮罩层"这一功能就是一个典型的交互设计,它允许用户通过点击按钮来显示一个覆盖整个屏幕的半透明层,通常用于加载提示、模态对话框或者阻止背景操作等场景。下面将详细介绍如何使用JavaScript来...

    微信判断浏览器自动弹出遮罩层代码

    在开发微信相关的网页应用时,有时我们需要针对微信内置浏览器(X5内核)做一些特定的适配,例如自动弹出遮罩层。这是因为微信浏览器在某些情况下,如打开外部链接时,可能会有自己的行为,比如自动加载微信的分享...

    jQuery图片点击弹出遮罩层标记注释特效

    **jQuery图片点击弹出遮罩层标记注释特效详解** jQuery是一个广泛应用于Web开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。在这个项目中,我们讨论的是如何利用jQuery实现一种...

    js实现的弹出遮罩层特效

    "js实现的弹出遮罩层特效"标题所指的就是利用JavaScript语言来实现这一功能。JavaScript是一种强大的客户端脚本语言,常用于增强网页的动态性和交互性。下面我们将深入探讨如何使用JavaScript来创建一个弹出遮罩层...

    点击弹出浮动层 弹出遮罩层

    在网页设计和开发中,...总之,“点击弹出浮动层 弹出遮罩层”是网页设计中一个重要的交互元素,通过巧妙的CSS和JavaScript技术可以实现良好的用户体验。开发者应注重细节,确保其在各种场景下都能高效、友好地工作。

    js+css点击弹出遮罩层图片放大展示demo

    综上所述,这个"js+css点击弹出遮罩层图片放大展示demo"通过结合JavaScript和CSS的力量,实现了优雅的图片放大查看功能,为用户带来了更直观、更具沉浸感的浏览体验。在实际项目中,可以根据需求进行调整和优化,以...

    弹出遮罩层

    创建一个简单的HTML/CSS/JavaScript弹出遮罩层示例: ```html &lt;div id="mask"&gt;&lt;/div&gt; 这是一个弹出窗口 ()"&gt;关闭 ``` ```css #mask { position: fixed; top: 0; left: 0; width: 100%; height: 100...

    asp.net弹出遮罩层示例

    在ASP.NET中,我们可以结合使用JavaScript库,如jQuery,来实现丰富的用户体验,包括弹出遮罩层功能。遮罩层通常用于在页面上显示半透明或全屏覆盖,以突出显示某个操作或信息,同时阻止用户与背景内容交互。 在这...

    微信判断浏览器自动弹出遮罩层【完整代码】

    在微信环境中,有时候我们需要针对特定的浏览器行为做出反应,例如防止自动弹出遮罩层。这种情况通常发生在用户打开一个网页链接时,微信内置浏览器为了提供更好的用户体验,可能会自动添加遮罩层来阻止页面的默认...

    lhgdialog弹出层,遮罩层效果源码示例

    "lhgdialog"是一个JavaScript库,专为创建各种类型的弹出层效果而设计,其中包括带或不带遮罩层的窗口,以及具有返回值功能、定位弹出窗口和随滚动条滚动等功能。下面我们将详细探讨这些知识点。 1. 弹出层(Pop-up...

    jQuery弹出遮罩层步骤流程表单代码

    在这个“jQuery弹出遮罩层步骤流程表单代码”项目中,我们将会探讨如何利用jQuery来实现一个功能丰富的交互式用户体验,特别是涉及弹出遮罩层、步骤流程和表单提交。 首先,`index.html`是项目的主页面,它包含了...

    弹出遮罩层示例

    实现弹出遮罩层的方法多种多样,可以使用纯CSS、JavaScript或者结合两者。在纯CSS方法中,我们可以通过设置绝对定位、宽高、背景颜色(通常是半透明)以及z-index属性来创建遮罩层。子窗口则通过相似的定位方式置于...

Global site tag (gtag.js) - Google Analytics