js关于弹也遮罩层
1:什么是遮罩层
遮罩层:我是弹也一个(遮罩层)还有一个(内容层),下面上图片看一效果
我们看到一个灰蒙蒙的遮盖(其实也是一个层)还有一个层(也就是我们展示的内容).
2: 弹出层效果居中分析
在这个图片中我们还看到我们弹出的层刚好在中间。下面在上个图看清楚的效果:
如果我们是一个“点”放在中间那么当然是$(window).width()/2,但我们是一个层,它有自已的高度和宽度,如果起始还是从中心点开始,你想它会在居间显示,显然
不对,它们靠右边了,所以我们减去它的高和宽 同是除以2
var posLeft = ($(window).width() - div_obj.width()) / 2;
var posTop = ($(window).height() - div_obj.height()) / 2;
3:关一个 z-index
遮盖层的z-index必须要小弹层的z-indx
它们的依次顺是 z-index(弹出层)>z-index(遮盖层)> z-index(body)
4:最后上源码:
本人源码也是参考园子里的朋友的,我这里最重要的是分析它的原理,知道了原理你想怎么添砖加瓦是你的事了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title> <style type="text/css"> /*弹出层*/
.pop-box {
z-index:;
border:2px solid #c4E3FF;
margin:;
display:none;
position:fixed;
background-color:#E1F1FF;
} /*头标题*/
.pop-box header {
padding:12px 12px;
margin:;
height:25px;
} /*头标题样式*/
.pop-box h3 {
color:#;
font-size:13px;
margin:;
} /*内容*/
.pop-box-body {
clear: both;
padding: 13px 13px 13px;
margin: ;
font-size:13px;
} .mask { width:%;
height:%;
position:fixed;
top:;
left:;
background-color:#;
filter: Alpha(Opacity=);
-moz-opacity: 0.8;
opacity: 0.8;
z-index: ; /*这个数值比pop box小*/
} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function popupDiv(div_id){ var div_obj = $("#" + div_id); var posLeft = ($(window).width() - div_obj.width()) / ; var posTop = ($(window).height() - div_obj.height()) / ; //添加并显示遮罩层 $("<div id='mask'></div>").addClass("mask")
.appendTo("body")
.fadeIn(); //fadeIn() 方法使用淡入效果来显示被选元素
div_obj.css({"top": posTop , "left": posLeft}).fadeIn(); } function hideDiv(div_id) {
$("#mask").remove();
//fadeOut() 方法使用淡出效果来隐藏被选元素
$("#" + div_id).fadeOut();
} </script> </head>
<body>
<div id="pop-div" style="width: 400px;" class="pop-box">
<header>
<h3>标题位置</h3>
</header>
<div class="pop-box-body">
<p>
正文内容
</p>
<input type="button" value="关闭" onclick="hideDiv('pop-div');" style="float: right" />
</div>
</div> <input type="button" id="btnTest" value="弹出" onclick="popupDiv('pop-div');" />
</body>
</html>
js关于弹也遮罩层的更多相关文章
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- jquery特效(7)—弹出遮罩层且内容居中
上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html&g ...
- jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...
- modal 弹框遮罩层,滚动穿透bug 解决方案
modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...
- JS 点击按钮后弹出遮罩层,有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- jq 弹半透明遮罩层
jquery制作点击按钮弹出遮罩半透明登陆窗口 // )[^>]*$|^#([\w-]+)$/,M=/^.[^:#\[\.,]*$/,ka=/\S/,$= /^(\s|\u00A0)+|(\s| ...
- 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 ...
随机推荐
- PhotoShop CS6实现照片背景虚化效果
在摄影实践中,虚化背景是突出主体的常用手段.但是由于消费级DC镜头的实际焦距都很短,因此实现浅景深而虚化背景的难度较大.如果我们希望用消费级DC也能达到虚化背景突出主体的效果,那么,Photoshop ...
- ( ̄▽ ̄)" 关于河北ETC记账卡的默认密码
去营业厅问了下,是6个1(111111),一般人我不告诉他 ...( _ _)ノ| 好吧,在技术博客里发这种东西合适吗? 还有就是,如果需要打印单位抬头发票的话,需要携带委托书盖单位公章(委托书可以去 ...
- 网页与APP中那些优美的登陆表单
我从Dribbble收集了20个漂亮的登陆表单案例.希望你看后能从中受益,并对你以后的登陆表单设计有帮助.设计一个登陆表单是非常容易,但大多设计都很糟糕.毫无亮点.无论如何,这篇Dribbble案例集 ...
- asp.net mvc中的用户登录验证过滤器
在WEB项目中建立 类: public class LoginFilter : ActionFilterAttribute { public override voi ...
- [svc]NFS存储企业场景及nfs最佳实战探究
办公网络里人一般系统用共享,尤其是财务, 他们喜欢直接点开编辑. 而不喜欢ftp nfs在网站架构中的用途 注: 如果pv量少,则放在一台机器上速度更快,如果几千万pv,则存储分布式部署. 网站架构中 ...
- ES6模块的import和export用法
ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载 ...
- HTML5学习笔记(二):HTML基础学习之一
元素.属性和格式化 元素是指开始标签到结束标签之前的所有代码,如: <p>this is my page!</p> <!-- 下面的可以称为空元素 --> < ...
- 菜鸟学SSH(六)——Spring事务管理
Spring是SSH中的管理员,负责管理其它框架,协调各个部分的工作.今天一起学习一下Spring的事务管理.Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.Tran ...
- Linux 移动或重命名文件/目录-mv 的10个实用例子
本文导航 -初识 mv 命令03% -1.移动文件08% -2.移动多个文件15% -3.移动目录23% -4.重命名文件或目录27% -5. 重命名目录35% -6. 打印移动信息39% -7. 使 ...
- git for windows 无法提交修改的处理
在git for windows里面不能commit修改,提示open shell open shell以后,使用git add [filename],会报错: fatal: Unable to cr ...