<!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. JS 鼠标滚轮事件（mousewheel/DOMMouseScroll）

    onmousewheel (FireFox不支持此事件) // IE/Opera/Chrome/Safari document.body.onmousewheel = function(event) ...

  2. mysql 数据库故障通过备份恢复模拟

  3. DataTable插件指定某列不可排序

    datatable是一个jQuery扩展的表格插件.其提供了强大的表格功能. 官方地址:http://www.datatables.NET/ DataTable提供的表格样式里面,第一行都是会有排序功 ...

  4. Linux下几种文件传输命令 sz rz sftp scp

    Linux下几种文件传输命令 sz rz sftp scp 最近在部署系统时接触了一些文件传输命令,分别做一下简单记录: 1.sftp Secure Ftp 是一个基于SSH安全协议的文件传输管理工具 ...

  5. symfony安装笔记

    下载http://symfony.com/download,这里版本是2.8 将D:\ApacheServer\php路径添加到环境变量path中,在cmd命令行中可以执行php命令 打开php.in ...

  6. 【GO】GO语言学习笔记二

    基本类型: 布尔型:boolean 整型:int8,byte,int16,int,uint,uintptr等 浮点型:float32,float64 复数类型:complex64,complex128 ...

  7. xcopy /r /y "$(TargetPath)" "$(ProjectDir)"..\CMSAdmin\DLL\

    作用:1.所有都生成这里容易管理 2.tfs获取的时候不会有出问题 3.如果都是引用项目 会存在先后顺序 也会导致生成代码的时候出问题

  8. java.sql.SQLException: 索引中丢失 IN 或 OUT 参数:: x

    我的x值是2 我的SQL语句采用的是预编译的形式,我先单独把SQL语句提出来在数据库里运行正常,值也传输正常.仔细查了一下预编译的代码,发现当时粘贴复制 忘把序号修改了,改正后

  9. [原]ComFriendlyWaitMtaThreadProc

    c++代码(大体逻辑没问题,细节需要确认) DWORD __stdcall *ComFriendlyWaitMtaThreadProc(LPVOID lpThreadParameter) { CoIn ...

  10. https 单向认证和双向认证配置

    HTTPS 是我们开发中经常用到的通信加密技术,能有效保护我们网络访问中的安全,本文主要讲解单向 和 双向 https 的配置.关于https 的实现原理在这里我就不赘述了,附上阮一峰老师的关于htt ...