1:什么是遮罩层

　　遮罩层:我是弹也一个(遮罩层)还有一个(内容层),下面上图片看一效果

我们看到一个灰蒙蒙的遮盖(其实也是一个层)还有一个层(也就是我们展示的内容).

2:  弹出层效果居中分析

在这个图片中我们还看到我们弹出的层刚好在中间。下面在上个图看清楚的效果：

如果我们是一个“点”放在中间那么当然是$(window).width()/2,但我们是一个层，它有自已的高度和宽度，如果起始还是从中心点开始，你想它会在居间显示，显然

不对，它们靠右边了，所以我们减去它的高和宽　同是除以2　

var posLeft = ($(window).width() - div_obj.width()) / 2;
var posTop = ($(window).height() - div_obj.height()) / 2;

3:关一个 z-index

　　遮盖层的z-index必须要小弹层的z-indx

　　它们的依次顺是 z-index(弹出层)>z-index(遮盖层)> z-index(body)

4:最后上源码:

　　本人源码也是参考园子里的朋友的，我这里最重要的是分析它的原理，知道了原理你想怎么添砖加瓦是你的事了

　　

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

     <title></title>

     <style type="text/css">

         /*弹出层*/

            .pop-box {

             z-index:;

             border:2px solid #c4E3FF;

             margin:;

             display:none;

             position:fixed;

             background-color:#E1F1FF;

         }

         /*头标题*/

         .pop-box header {

             padding:12px   12px;

             margin:;

             height:25px;

         }

         /*头标题样式*/

          .pop-box h3  {

             color:#;

             font-size:13px;

             margin:;

         }

          /*内容*/

          .pop-box-body {

             clear: both;

             padding: 13px 13px 13px;

             margin: ;

             font-size:13px;

         } 

         .mask {

             width:%;

             height:%;

             position:fixed;

             top:;

             left:;

             background-color:#;

             filter: Alpha(Opacity=);

             -moz-opacity: 0.8;

             opacity: 0.8;

             z-index: ; /*这个数值比pop box小*/

         }

     </style>

     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

     <script type="text/javascript">

         function popupDiv(div_id){

              var div_obj = $("#" + div_id);  

              var posLeft = ($(window).width() - div_obj.width()) / ;

              var posTop = ($(window).height() - div_obj.height()) / ;

              //添加并显示遮罩层

              $("<div id='mask'></div>").addClass("mask")

                                        .appendTo("body")

                                        .fadeIn();

              //fadeIn() 方法使用淡入效果来显示被选元素

              div_obj.css({"top": posTop , "left": posLeft}).fadeIn();    

         } 

         function hideDiv(div_id) {

             $("#mask").remove();

             //fadeOut() 方法使用淡出效果来隐藏被选元素

             $("#" + div_id).fadeOut();

         }     

     </script>

 </head>

 <body>

     <div id="pop-div" style="width: 400px;" class="pop-box">

         <header>

          <h3>标题位置</h3>

         </header>

         <div class="pop-box-body">

             <p>

                 正文内容

             </p>

             <input type="button" value="关闭" onclick="hideDiv('pop-div');" style="float: right" />

         </div>

     </div>

     <input type="button" id="btnTest" value="弹出" onclick="popupDiv('pop-div');" />

 </body>

 </html>

js关于弹也遮罩层的更多相关文章

  1. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  2. jquery特效（7）—弹出遮罩层且内容居中

    上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html&g ...

  3. jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

    本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...

  4. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  5. modal 弹框遮罩层，滚动穿透bug 解决方案

    modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...

  6. JS 点击按钮后弹出遮罩层，有关闭按钮

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

  7. jq 弹半透明遮罩层

    jquery制作点击按钮弹出遮罩半透明登陆窗口 // )[^>]*$|^#([\w-]+)$/,M=/^.[^:#\[\.,]*$/,ka=/\S/,$= /^(\s|\u00A0)+|(\s| ...

  8. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

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

  9. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

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

随机推荐

  1. 安装/移除 MySQL 服务

    MySQL Community Server 下载:https://dev.mysql.com/downloads/mysql/ 以下内容使用的版本为:mysql-5.7.17-win32.zip 1 ...

  2. Android 性能优化总结

    App 流畅运行,是用户体验的第一步.App 流程运行,涉及到性能优化,主要涉及到布局优化, 绘制优化,内存泄漏优化,响应速度优化,列表展示优化,Bitmap 优化,线程优化,包大小优化. 布局优化 ...

  3. ASP.NET MVC中的cshtml页面中的下拉框的使用

    ASP.NET MVC中的cshtml页面中的下拉框的使用 用上@Html.DropDownList 先记下来..以做备忘...

  4. [na]完全理解icmp协议

    1.ICMP出现的原因 在IP通信中,经常有数据包到达不了对方的情况.原因是,在通信途中的某处的一个路由器由于不能处理所有的数据包,就将数据包一个一个丢弃了.或者,虽然到达了对方,但是由于搞错了端口号 ...

  5. （原创）c++11中 function/lamda的链式调用

    关于链式调用,比较典型的例子是c#中的linq,不过c#中的linq还只是一些特定函数的链式调用.c++中的链式调用更少见因为实现起来比较复杂.c++11支持了lamda和function,在一些延迟 ...

  6. vue-cli+webpack在生成的项目中使用bootstrap方法（一）

    在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一 ...

  7. [iOS Xcode8报错]dyld: Library not loaded: /System/Library/Frameworks/UserNotifications.framework/UserN

    [iOS Xcode8报错]dyld: Library not loaded: /System/Library/Frameworks/UserNotifications.framework/UserN ...

  8. [mBean]-Delphi框架，回归简单，自然。

    [mBean]的萌芽 最近公司要求把我们公司的任务可以外包,问我有没有好的方案. 如果要其他程序员的人来做我们内部的框架会导致了,内部的框架需要公布很多单元和逻辑,思路.其次要把我们的思路和规则强加给 ...

  9. 【ARM】2410裸机系列－ADC数模转换

    开发环境   1.硬件平台:FS2410 2.主机:Ubuntu 12.04 ADC寄存器配置       1.初始化ADC(ADCCON) 设置预分频,预分频因子,选择A/D转换通道,并选择正常模式 ...

  10. 9个绚丽多彩的HTML5进度条动画赏析

    进度条在网页应用中越来越广泛了,特别是现在的页面异步局部刷新时代,进度条可以让用户更好的等待操作结果.本文要分享9款绚丽多彩的HTML5进度条动画,有很多还是挺实用的,效果也非常不错. 1.CSS3发 ...