上周写了几个小特效，其中有个点击按钮弹出遮罩层的特效，下面来看最终实现的效果：

由于是测试的程序，所以我未加关闭的按钮。

一、主体程序

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>弹出居中遮罩</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <link rel="stylesheet" type="text/css" href="css/layout.css"/>

    </head>

    <body>

        <section class="test">

            这里是主体内容<br />

        <input type="button" class="testButton" value="弹出遮罩" />

        </section>

        <section class="testBg"></section>

        <section class="testCont">

                这里是弹出的内容测试

        </section>

        <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/layout.js" type="text/javascript" charset="utf-8"></script>

    </body>

</html>

二、CSS样式

*{

    margin: 0;

    padding: 0;

}

.testBg{

    position: fixed;      /*考虑主体内容可能过多出现竖直滚动条，建议用fixed*/

    top: 0;

    background-color: #000;

    filter:alpha(opacity=80); /* IE */

    -moz-opacity:0.8; /* Moz + FF */

    opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/

    display:none ;

}

.testCont{

    position: fixed;  /*考虑主体内容可能过多出现竖直滚动条，建议用fixed*/

    top: 0;

    left: 0;

    width:200px;

    border: 1px #ffc700 solid;

    color: #ffc700;

    display:none ;

}
 

三、JS程序

这个才是本次随笔所说的重点，下面来看一段错误的JS程序：

$(function(){

    $(".testBg").height($(window).height()).width($(window).width());    //使遮罩的背景覆盖整个页面

    var testContTop=($(window).height()-$(".testCont").height())/2;      //计算弹出的框距离页面顶部的距离

    var testContWidth=($(window).width()-$(".testCont").width())/2;         //计算弹出的框距离页面左边的距离

    $(".testCont").css({

        "top":testContTop,

        "left":testContWidth

    });

    $(".testButton").click(function(){

        $(".testBg").show();

$(".testCont").show();
}) })

上面这段程序看起来没有问题，那么来看一下输出的结果：

实际测量的时候上下的间距是不一致的，经过师父的指点才知道是浏览器渲染的结果，具体的原理请看这篇文章：http://www.cnblogs.com/lhb25/p/how-browsers-work.html

那么正确的JS程序是：

$(function(){

    $(".testBg").height($(window).height()).width($(window).width());//使遮罩的背景覆盖整个页面

    $(".testButton").click(function(){

        $(".testBg").show();

        $(".testCont").show();

        showDiv();

    })

})

function showDiv(){

    var testContTop=($(window).height()-$(".testCont").height())/2;  //计算弹出的框距离页面顶部的距离

    var testContWidth=($(window).width()-$(".testCont").width())/2;  //计算弹出的框距离页面左边的距离

    $(".testCont").css({

        "top":testContTop,

        "left":testContWidth

    });

}

从上面程序可以看出在遮罩层弹出显示以后再执行一个函数动态的设置弹出层的背景大小和距离页面的上间距和左间距，而不是一开始加载JS时就已经设置好弹出层各项参数。

jquery特效（7）—弹出遮罩层且内容居中的更多相关文章

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

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

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

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

  3. 基于jQuery向下弹出遮罩图片相册

    今天给大家分享一款基于jQuery向下弹出遮罩图片相册.单击相册图片时,一个遮罩层从上到下动画出现.然后弹出显示图片.这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.O ...

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

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

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

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

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

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

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

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

  8. jQuery弹出遮罩层效果完整示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. HTML 弹出遮罩层二（遮罩层和内容标签分开）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. OS | Socket

    TCP 创建socket: int socket(int domain, int type, int protocol); AF = Address FamilyPF = Protocol Famil ...

  2. javaScript 时间转换，将后台返回的时间为一串数字转成正常格式

    js完整代码: function transferTime(cTime){ var jsonDate = new Date(parseInt(cTime)); Date.prototype.forma ...

  3. 数据结构------------------二叉查找树（BST）的java实现

    数据结构------------------二叉查找树(BST)的java实现 二叉查找树(BST)是一种能够将链表插入的灵活性和有序数组查找的高效性相结合的一种数据结构.它的定义如下: 二叉查找树是 ...

  4. 使用spring声明式事务，spring使用AOP来支持声明式事务，会根据事务属性，自动在方法调用之前决定是否开启一个事务，并在方法执行之后决定事务提交或回滚事务。

    使用spring声明式事务,spring使用AOP来支持声明式事务,会根据事务属性,自动在方法调用之前决定是否开启一个事务,并在方法执行之后决定事务提交或回滚事务.

  5. 邁向IT專家成功之路的三十則鐵律 鐵律二十二：IT人升遷之道-無為

    升遷管道是許多人求職時相當重要的考量之一,畢竟人除了很愛錢之外更愛顯赫的頭銜,然而在企業中越顯赫的頭銜,其背後通常有更多的罵名,因為許多人的高官厚爵都是踩著一群人的頭頂爬上去的,隨時哪一天跌了下來,都 ...

  6. openfire Android学习(二)----对分组、好友和头像等一些操作

    一.查询所有分组 通过Roster来获取所有分组,Roster可以通过connection.getRoster()来得到. [java] view plaincopy /** * 获取所有组 * *  ...

  7. Mac下安装和使用GunPG（GPG）

    GPG是加解密的工具,亦可以用于签名.非对称加解密.需要公钥和私钥. mac下安装:brew install gpg 使用gpg工具校验下载文件的完整性,从官网下载KEYS和asc文件:gpg --i ...

  8. 【转载】Websocket学习

    首先是在Tomcat里面看到Websocket的演示.很有意思. http://localhost:8080/examples/websocket/index.xhtml 里面有: Echo exam ...

  9. 在.NET使用JSON作为数据交换格式【转】

    http://www.cnblogs.com/zhoufoxcn/archive/2011/03/16/2515611.html 我们知道在.NET中我们有多种对象序列化的方式,如XML方式序列化.B ...

  10. HashMap 和 Hashtable 的同和不同

    综述 可以直接根据 hashcode 值判断两个对象是否相等吗?肯定是不可以的,因为不同的对象可能会生成相同的 hashcode 值.虽然不能根据 hashcode 值判断两个对象是否相等,但是可以直 ...