<!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. tcp连接listen的backlog剖析

    TCP连接中,最重要的是连接TCP连接上,两个方向之间的各个状态及各个系统调用与状态之间的关系.往往可以以两种图表示,第一种是状态转换图,第二种是连接时序图.如下: 状态图: 时序图:         ...

  2. linux环境下学习使用pro*c/c++工具

    1.proc是oracle用来预编译嵌入SQL语句的c程序. 2.如何使用proc工具 在Linux环境下,首先确保gcc编译器正常使用,安装oracle数据库或者客户端,一般就会默认安装pro*c/ ...

  3. Solr5 DataImport 处理1对多关系

    “问题” 和“派发处理” 是2个对象. 每个问题可以被派发N次, 最后结束问题. 实际查询中数据量可能很大,同时即可以从问题查派发部门, 也可以从派发情况查询问题(如本部门处理的问题) 使用的技巧就是 ...

  4. 初始python第三天（三）

    全局变量与局部变量 1.什么是全局变量 在globals中的变量,都是全局变量,全局变量的作用域就是整个程序 NAME = 'alex' def global_test(): name = 'alex ...

  5. PROC系列之---/proc/pid/stat

      转自: http://blog.csdn.net/zjl_1026_2001/article/details/2294067 /proc/ /stat 包含了所有CPU活跃的信息,该文件中的所有值 ...

  6. Asp.Net运行于32/64模式下的性能差异

    项目使用的是Oracle数据库,.Net使用Odac对数据库进行访问.在官方下载Odac时会让你选择是下载32位的还是64位的.这会直接影响到网站的运行模式.目前我们使用的是32位的,那么布署时,需要 ...

  7. android中webrtc的几个关键的状态

    在android层使用webrtc的时候,都是通过native层回调的形式来触发ui的改变,比如在什么时候绘出对方的视频窗口,什么时候表示双方连接已经建立等等... 我现在把我知道的列出来用于备忘. ...

  8. PHP三元运算符 isset($_GET['id']) ? $_GET['id'] : ”

    $id = isset($_GET['id']) ? $_GET['id'] : ''; ?> 这是一个php的三元运算符 (条件) ? (值1):(值2); 解释:如果条件成立(为真),则执行 ...

  9. 渗透杂记-2013-07-13 windows/mssql/mssql_payload

    扫描一下 Starting Nmap 5.30BETA1 ( http://nmap.org ) at 2011-05-06 09:36 中国标准时间 NSE: Loaded 49 scripts f ...

  10. jQuery EasyUI教程之datagrid应用（二）

    上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下: 上次显示的结果是这样的 点击查看上篇:jQuery Eas ...