`
boss5518831534
  • 浏览: 230650 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

web页面弹窗遮罩层

 
阅读更多

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

 

调用<a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">显示弹层</a>
 
分享到:
评论

相关推荐

    iframe弹出框遮罩父类页面

    2. **遮罩层**:为了实现遮罩效果,我们需要在子页面中添加一个全屏的透明div,作为遮罩层。这个div通常设置为全屏尺寸,并设置较低的不透明度,以达到半透明的效果。同时,它的初始样式也需要设置为隐藏。 3. **...

    19种高端大气的js遮罩弹窗效果

    在js遮罩弹窗中,CSS3常用于实现平滑的动画效果、自定义弹窗样式和背景遮罩层。 4. **jQuery库**:虽然标签中只提到了JavaScript,但文件名中的“jquery”表明可能使用了jQuery库。jQuery简化了DOM操作、事件处理和...

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

    2. **遮罩层实现**:遮罩层通常用于在页面上显示半透明的背景,以突出显示某个部分或阻止用户与页面其余部分交互。可以使用CSS和HTML创建一个简单的遮罩层,如下: ```html &lt;div id="mask"&gt;&lt;/div&gt; ``` ```css #...

    解决移动端fixed遮罩弹窗滚动击穿的vue指令

    在移动端Web应用开发中,经常会遇到这样一个问题:当一个fixed定位的遮罩层或弹窗出现时,页面的背景内容仍然可以滚动,这被称为“滚动击穿”现象。这种问题在Vue.js应用中同样存在。本文将深入探讨这个问题,并提供...

    JS遮罩层 提示层

    当用户需要选择某个省份的所有城市时,遮罩层可以提供一个独立的界面,避免用户在页面其他元素中迷失。 在描述中提到的“弹出层展示省份所有城市,可以选择城市”,这通常涉及到以下几个关键知识点: 1. **DOM操作...

    C# 弹出Loading遮罩层

    在C#编程中,"弹出Loading遮罩层"是一个常见的功能需求,特别是在进行异步操作或者长时间数据加载时,为了提升用户体验,我们会显示一个遮罩层,通常带有"加载中"或"请稍候"的提示信息。下面将详细解释如何在C#中...

    ie firefox做了一个遮罩层

    在网页开发中,"遮罩层"(Mask Layer)是一种常见的设计元素,它通常用于创建弹窗、提示或加载效果,使得用户在等待操作完成或查看特定内容时,其他页面元素变得不可见或半透明。"ie firefox做了一个遮罩层"这个标题...

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

    3. **遮罩层**(Mask Layer):遮罩层是UI设计中常见的一种元素,用于覆盖页面部分区域,创建视觉焦点或者阻止用户与被遮罩部分的交互。这里实现的遮罩层可能包含一个提示信息和指向外置浏览器的箭头图标。HTML和CSS...

    easyui排版布局遮罩层

    - 弹窗加载:打开对话框或窗口时,使用遮罩层提供视觉反馈,让用户知道操作正在进行。 通过以上介绍,我们了解了 EasyUI 中遮罩层的基本用法和在排版布局中的应用。合理运用遮罩层能够提升用户界面的交互性和专业...

    一个完整的遮罩层实例

    总结来说,遮罩层是Web开发中一种实用的设计模式,它通过提供一种专注的用户体验,增强了网页的互动性和功能性。理解其工作原理并能灵活运用,对于提升网页设计的用户体验至关重要。通过分析和实践提供的"遮罩层...

    jQuery css3打开遮罩图片形状过渡动画效果

    4. **CSS3形状和边框**:在遮罩层的形状过渡中,可能涉及到CSS3的形状属性,如`border-radius`创建圆角,`clip-path`或`mask`定义复杂形状。这些属性可以与过渡效果结合,实现形状的动态变化。 5. **响应式设计**:...

    javascript div 遮罩层封锁整个页面

    在进行Web开发时,页面遮罩是一种常见的用户交互方式,用于在进行某些操作(如数据加载、弹窗处理等)时限制用户与页面的交互,增强用户体验。本知识点将详细介绍如何使用JavaScript结合一个div元素来实现在客户端...

    弹出遮罩层

    - **可访问性**:确保遮罩层和弹出窗口对屏幕阅读器友好,遵循WCAG(Web Content Accessibility Guidelines)标准。 - **响应式**:设计应适应不同设备和屏幕尺寸,确保在移动设备上也能良好工作。 - **用户体验*...

    数据加载弹窗层

    "数据加载弹窗层"是一种常见的设计模式,用于在应用程序执行数据加载或处理时提供反馈,以告知用户系统正在运行后台任务,防止用户误操作或产生应用无响应的错觉。jQueryLoading是实现这一功能的一种工具,它允许...

    jQuery 遮罩层

    在Web开发中,遮罩层(Mask Layer)是一种常见的交互元素,用于在用户与页面交互时提供一种半透明覆盖,通常用于加载提示、弹窗确认、模态对话框等场景。jQuery,作为一款广泛使用的JavaScript库,提供了简单易用的...

    iframe子页面操作父页面并实现屏蔽页面弹出层效果

    在本文中,我们将探讨如何在使用iframe嵌套页面时,从子页面(iframe内部页面)操作父页面(包含iframe的页面),以屏蔽整个父页面并弹出特定的层。这种技术尤其适用于需要在子页面加载时阻止用户与父页面互动,同时...

    可拖动div弹窗

    这通常通过创建一个全屏的半透明遮罩层来实现,遮罩层覆盖整个页面,只允许用户与弹窗进行交互。遮罩层的CSS样式可以设置为固定定位,宽高为100%,并设定合适的背景颜色和透明度。 在压缩包中的“弹窗可拖动div....

    弹窗小技巧-div

    2. **透明遮罩层**:为了防止用户在弹窗出现时与背景交互,可以添加一个半透明的遮罩层覆盖整个页面。 3. **关闭按钮**:弹窗内应提供关闭按钮,允许用户随时关闭弹窗。可以为一个按钮添加点击事件,执行隐藏弹窗的...

    超炫登陆注册弹窗效果

    3. **遮罩层**:遮罩层是弹窗设计中的一个重要元素,它通常是一个半透明的背景层,覆盖在原有页面上,突出弹窗内容,同时防止用户误操作其他区域。"超炫登录注册弹窗效果"中,遮罩层的存在确保了弹窗的焦点,并且...

    模式化弹窗代码

    1. **模态遮罩**:创建一个半透明的遮罩层覆盖在主页面上,使得用户无法与背景内容交互,直到弹窗关闭。 2. **多主题样式**:提供多种预设样式,允许开发者根据项目需求选择合适的外观。 3. **可定制化**:可以...

Global site tag (gtag.js) - Google Analytics