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 ...
随机推荐
- 【Java】日志知识总结和经常使用组合配置(commons-logging,log4j,slf4j,logback)
Log4j Apache的一个开放源码项目,通过使用Log4j,我们能够控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务 器.NT的事件记录器.UNIX Syslog守护进程等.用 ...
- Atitit 我们的devops战略与规划 规范 推荐标准
Atitit 我们的devops战略与规划 规范 推荐标准 1. Vm容器化1 2. 热部署tomcat+jrebel 或者resin1 3. 增量更新与差异更新1 4. 补丁提取与应用2 为了方便提 ...
- git将本地项目添加到github上
git init git add . git commit -m '添加备注' git add remote origin originUrl git push -u origin master 注意 ...
- C++ STL set和multiset的使用
C++ STL set和multiset的使用 std::set<int> s;那个s这个对象里面存贮的元素是从小到大排序的,(因为用std::less作为比较工具.) 1,set的含义是 ...
- python virtualenv使用
1.什么是virtualenv virtualenv用来做环境隔离,比如项目A使用了python2,项目B使用了python3 使用virtualenv可以分别生成项目A和项目B的环境包 2.virt ...
- 【Java Concurrency】sleep()、wait()、notify()、notifyAll()的用法与区别
>关于本文 本文介绍sleep().wait().notify().notifyAll()方法,主要要理解: sleep()和wait()的区别. wait()与notify().notifyA ...
- 【Android】LayoutInflater
LayoutInflater的作用 LayoutInflater的作用类似于findViewById(). 不同点是: LayoutInflater是用来找res/layout/下的xml布局文件,并 ...
- 【消息】linux之消息队列
1.机制 消息队列的运行方式与命名管道非常相似. 欲与其他进程通信的进程只需要将消息发送到消息队列中,目的进程就从消息队列中读取需要的消息. 2.源码 1)发送方 //msg_send.c #in ...
- 多媒体文件格式之MKV
[时间:2016-07] [状态:Open] MKV是一种开源的多媒体封装格式,是Matroska中应用比较多的格式之一.常见的后缀格式是.mkv(视频,包括音频和字幕)..mka(纯音频)..mks ...
- 系统清理工具CCleaner被植入后门
概述 2017年9月18日,有情报披露,著名的系统优化工具CCleaner的某个版本被发现植入后门,大量使用该工具的用户恐将面临泄密风险.这是继Xshell后门事件后,又一起严重的软件供应链来源攻击事 ...