<!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. hbuilder的使用

    今天在群里看群友提及了hbuilder,下载试了下,发现确实会有些代码敲起来方便多了.也帮助我自己发现uft8和保存的时候选择字符重要,不然乱码,很窝心.

  2. tornado_mongodb 连接和使用

    tornado,mongodb 连接和使用,开始使用tornado3.2,mongodb2.6,pymongo-3.03遇到不少的麻烦.因为新版tornado与老版本的代码有很多变化,mongodb根 ...

  3. django 其他地址访问不了问题

    启动的时候 使用 python manage.py runserver 0.0.0.0:8000  即可接收所有IP访问

  4. 报表控件NCreport教程：子查询系统设计

    数据报表中经常需要用到主从数据关系,比如发票.订单等一类的特殊文件,在报表控件NCreport中也不例外.数据报表至少有一个表头和一个通过 主键和外键关联的相关细节数据集.子查询系统则是通过父数据源驱 ...

  5. NCreport报表控件教程：设计页眉和页脚

    一.设计页眉 一般来说页眉部分一般是用于包含标题的内容, 首先我们会添加列标签到页眉部分,标签都是简单的文本,标签项一般是用于在报表上显示一些描述信息,标签都是静态项,所以它们的值不会有变化. 添加标 ...

  6. Linq对XML的简单操作

    前两章介绍了关于Linq创建.解析SOAP格式的XML,在实际运用中,可能会对xml进行一些其它的操作,比如基础的增删该查,而操作对象首先需要获取对象,针对于DOM操作来说,Linq确实方便了不少,如 ...

  7. html布局小练习（百度首页）

    绝对定位百度首页练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  8. NodeJS 调试工具（node-inspector）

    node-inspector是基于Chrome的调试工具. 安装: npm install -g node-inspector 1.启动node-inspector来监听node.js的debug调试 ...

  9. SpringMVC框架下数据的增删改查，数据类型转换，数据格式化，数据校验，错误输入的消息回显

    在eclipse中javaEE环境下: 这儿并没有连接数据库,而是将数据存放在map集合中: 将各种架包导入lib下... web.xml文件配置为 <?xml version="1. ...

  10. AngularJS中使用$resource

    这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了.      REST是Representat ...