Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中
<!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动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中的更多相关文章
- jquery特效（7）—弹出遮罩层且内容居中
上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html&g ...
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...
- jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...
- HTML 弹出遮罩层二（遮罩层和内容标签分开）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS 点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- js弹出div层内容(按回退键关闭div层及遮罩)
<!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...
- web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动
场景概述 弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这 ...
随机推荐
- 【转】安装mysql 出现：Fatal error: Can't open and lock privilege tables: Table 'mysql.user' doesn't exist
来源:http://blog.csdn.net/dapeng0112/article/details/37053407 本来初始化配置是这样的: scripts/mysql_install_db -- ...
- C#如何反射出委托的签名，如何使用反射调用委托
本文阐述C#中如何反射出委托的签名,假如我们有委托FooDelegate定义如下 delegate double FooDelegate (string param, bool condition); ...
- YbSoftwareFactory 代码生成插件【二十四】：MVC中实现动态自定义路由
上一篇介绍了 公文流转系统 的实现,本篇介绍下MVC下动态自定义路由的实现. 在典型的CMS系统中,通常需要为某个栏目指定个友链地址,通过指定友链地址,该栏目的地址更人性化.方便记忆,也有利用于搜索引 ...
- cocopods 安装与使用
iOS 最新版 CocoaPods 的安装流程 1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 2.使用新的源 $gem sourc ...
- C# 中的委托和事件（转载）
引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去 ...
- ADB简单基础命令
1.查看设备 adb devices 这个命令是查看当前连接的设备, 连接到计算机的android设备或者模拟器将会列出显示 2.安装软件 adb install adb install :这个命令将 ...
- [转]MySQL innodb buffer pool
最近在对公司的 MySQL 服务器做性能优化, 一直对 innodb 的内存使用方式不是很清楚, 乘这机会做点总结. 在配置 MySQL 的时候, 一般都会需要设置 innodb_buffer_poo ...
- 谷歌 HTML/CSS 规范 2016-12-30
背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率. 通用样式规范 协议 省略图片.样式.脚本以及其他媒体文件 URL 的协议部分(http:,https:),除 ...
- “You couldn’t see my tears cause I am in the water.“ Fish said to water.“But I could feel your tears cause you are in my heart..“ Answered water.
“You couldn’t see my tears cause I am in the water.“ Fish said to water.“But I could feel your tears ...
- T-SQL语句简易入门（第一课）
在微软官方,有一篇介绍T-SQL语句的教程,非常好理解,完全可以帮助新手入门,了解常用SQL语句的使用语法,而且又不涉及较为复杂的操作.不用安装示例数据库AdventureWorks.下面是教程里内容 ...