<!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. Create a SQL Server Database on a network shared drive

    (原文地址:http://blogs.msdn.com/b/varund/archive/2010/09/02/create-a-sql-server-database-on-a-network-sh ...

  2. tensorflow 学习笔记

    tensorflow一些函数: 1.tf.ones(shape,type=tf.float32,name=None)      tf.ones([2, 3], int32) ==> [[1, 1 ...

  3. Shellcode编程小技巧

    工作需要,需要注入其他程序监控一些东西,检测到的数据通过WM_COPY 消息发送给显示窗体.(大体是这样的还没定稿) ##1 选择一个框架 ## tombkeeper/Shellcode_Templa ...

  4. wex5 实战 用户点评与提交设计技巧

    最近遇到很多同学做毕业设计,其中有一项是用户点评与提交.功能并不复杂,同学们又不会,做为一个完整的功能,如果用wex5来设计开发,事半功倍.今天就以景区实战来向大家展示wex5的高效与强大.半天可以设 ...

  5. 学习Linux系列--安装软件环境

    本系列文章记录了个人学习过程的点点滴滴. 回到目录 10.安装Lamp套件. 最简单的方式,如下 sudo tasksel install lamp-server Apache 菜鸟教程 Ubuntu ...

  6. JavaScript---function、this关键字相关习题

    1. 请看下列代码: function F( ){ function C( ){ return this; } return C(); } var o=new F( ); 请问上面的this值指向的是 ...

  7. FunsionCharts图标控件点击

    1.点击执行js 在页面中添加点击chart后需要触发的js事件: <script>        functionmyJS(myVar){          window.alert(m ...

  8. GOAndroid的安装和配置

    android环境的配置还是比较复杂的,特别对于我这样一直使用mfc的程序员来说,有很多观念上需要转变.好在配置成功后就能够不断复用,那么这样的问题值得整理出来 一.安装jdk 二.解压adt-bun ...

  9. EasyUI、Struts2、Hibernate、spring 框架整合

    经历了四个月的学习,中间过程曲折离奇,好在坚持下来了,也到了最后框架的整合中间过程也只有自己能体会了. 接下来开始说一下整合中的问题和技巧: 1,  jar包导入 c3p0(2个).jdbc(1个). ...

  10. git中忽略UserInterfaceState.xcuserstate的方法

    在commit 时候一直会提示userinterfacestate.xcuserstate文件尚未commit. 你可以用命令行 git rm --cached [YourProjectName].x ...