<!DOCTYPE html>

<html>

<head>

</head>

<body id="body">

    <!--

        /*弹出遮罩层*/

        第一步：初始化遮罩层的基本属性，将其相对于浏览器窗口定位，将其尺寸缩放为0

        第二步：设置遮罩层的高度，以便弹出式覆盖整个浏览器窗口

        第三步：通过点击事件给遮罩层添加弹出动画类

        /*固定宽高盒子上下左右居于不定宽高容器正中*/

        第一步：设置待定位盒子和宽高值

        第二步：将待定位盒子position属性设为absolute使其相对于父元素绝对定位（相对于static定位以外的第一个父元素进行定位，这里是父元素div1）,

        使其顶部和左侧定位距离设为父元素高和宽的50%（即：先将盒子定位到“父元素4分之1区域的右下部”）

        第三步：把待定位盒子的margin-top值和margin-left值设为其高度和宽度一半的负值（即：把盒子从右下区域拉回正中间）

    -->

    <div id="div1">

        <div id="div2">

            <div>

                content content content content content content content content

            </div>

            <div id="close">关闭遮罩弹出层</div>

        </div>

    </div>

    <div id="show">点击弹出遮罩层</div>

    <style>

        * {

            margin:0;

            padding:0;

        }

        #body {

            background-color:green;

        }

        #show, #close {

            cursor:pointer;

        }

        #div1 {

            width:100%;

	        background: rgba(47, 63, 89, 0.8);

            position:fixed; /*使遮罩层相对于浏览器窗口进行绝对定位*/

            top:0;

            left:0;

            transform:scale(0,0);

        }

        #div2 {

            width:300px;

            height:200px;

            background-color:red;

            position:absolute;

            top:50%;

            left:50%;

            margin-top:-100px;

            margin-left:-150px;

        }

        /*Css动画类*/

        .coverAniamtion {

            animation: name 2s both;

        }

        @keyframes name {

            from {

                transform:scale(0,0);

            }

            to {

                transform:scale(1,1);

            }

        }

    </style>

    <script src="jquery-2.1.1.min.js"></script>

    <script>

        $(function () {

            var height = $(window).height();

            $("#div1").css("height", height);

            $("#show").click(function () {

                $("#div1").show();

                $("#div1").addClass("coverAniamtion");

            });

            $("#close").click(function () {

                $("#div1").hide();

            });

        });

    </script>

</body>

</html>

　　

Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中的更多相关文章

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

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

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

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

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

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

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

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

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

    <!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. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

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

  8. js弹出div层内容(按回退键关闭div层及遮罩)

    <!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...

  9. web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动

    场景概述 弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这 ...

随机推荐

  1. redhat 更新 python 为 2.7.6

    1. 下载 wget http://python.org/ftp/python/2.7.6/Python-2.7.6.tgz 2. 解压,编译 tar zxvf Python-2.7.6.tgz ./ ...

  2. FilterControl 显示时间并精确到时分秒的方法

  3. JSON.stringify（）

    概述 JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串. 语法 JSON.stringify(value[, replacer [, space] ...

  4. rabbitmq 小记

    如果消息由生产者生产之后,没有消费端来消费(此处生产者也负责队列的创建) 在超时之后需要对消息进行删除(如果一直保留队列里,在消费端启动后消费了此消息,会和生产端的数据产生冲突,添加程序的复杂度) 因 ...

  5. Texture tiling and swizzling

    Texture tiling and swizzling 原帖地址:http://fgiesen.wordpress.com If you’re working with images in your ...

  6. 页面Button/Link 传参数

    很多情况下,我们需要在一个标准的页面上添加一个button 或者 是Link, 在点击的过程中想把,一些参数传值到另外一个自定义的页面: 下面这个例子说明是如何操作的 如下图所示,是创建另一个Obje ...

  7. ecshop二次开发之常用函数及汇总

    lib_time.php gmtime()说明:获得当前格林威治时间的时间戳 server_timezone()说明:获得服务器的时区 local_mktime($hour = NULL , $min ...

  8. 主机和虚拟机不能ping通问题

    VMware的三种网络模式附上: 在vmw中,默认有3个虚拟交换机 分别是VMnet0(桥接).VMnet1(主机网络)以及VMnet8(NAT) 还可以根据需要添加VMnet2~VMnet7和VMn ...

  9. CSS样式基础二

    一.列表 主要分为有序列表ol,无序列表ul <ul> <li></li> ... </ul> <ol> <li></li ...

  10. 理解LSTM网络

    转载自:http://blog.csdn.net/ycheng_sjtu/article/details/48792467