css 遮罩文字居中,Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中...

content content content content content content content content

关闭遮罩弹出层

点击弹出遮罩层

* {

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);

}

}

$(function () {

var height = $(window).height();

$("#div1").css("height", height);

$("#show").click(function () {

$("#div1").show();

$("#div1").addClass("coverAniamtion");

});

$("#close").click(function () {

$("#div1").hide();

});

});

jquery特效(7)—弹出遮罩层且内容居中

上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序

移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

HTML 弹出遮罩层二(遮罩层和内容标签分开)

JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

js弹出div层内容(按回退键关闭div层及遮罩)

web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动

场景概述 弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这 ...

jQuery弹出遮罩层效果完整示例

ap">

linux操作系统基础篇(八)

shell脚本的变量以及正则表达式 一.变量 含义:程序的运行就是一些列状态的变量->用变量值的变化去表示. 命名规则 以字母或下划线开头,剩下的部分可以是:字母.数字.下划线. 最好遵循下述规 ...

scrapy_redis 相关: 多线程更新 score/request.priority

0.背景 使用 scrapy_redis 爬虫, 忘记或错误设置 request.priority(Rule 也可以通过参数 process_request 设置 request.priority), ...

jQuery (02) 重点知识点总结

jQuery 如果用户未登录,当加入购物车,会将商品相关信息存入 cookie 或者 session,这两个都是可以标识用户信息的东西 是一个 JavaScript 库,封装了常用的开发功能,和一些需 ...

linux命令三剑客之一sed

a(a\或者a\\):在当前行后面加入一行文本sed '/^test/a---->this is a example2' example 在test开头的行下,添加一行新的文本“----> ...

scala-Unit-3-Scala基础语法2

一.定义方法.函数.及方法转换为函数 1.方法的定义: def  方法名(参数1:数据类型,参数2:数据类型...):返回值类型 ={ } 2.定义函数: val h1 = (a:Int,b:Int) ...