自定义弹出层居中并显示遮罩

1.自己先定义两个div,一个是用来放弹出层内容的，一个是用于设置遮罩层颜色的，一个触发显示弹出层的按钮

2.给两个div分别设置css样式，遮罩的样式主要有：position:fixed;z-index:2;background-color:#000;opacity:0.7;top:0;left:0;width:100%;height:100%;display:none;

显示弹出层内容的主要有:postion:fixed;display:none;top:50%;left:50%;z-index:3;background-color:#fff

3.写js,在$(function(){...});在页面加载事件里面写按钮的click事件，那么就直接$("#content").fadeIn(200);$("#bg").fadeIn(200);显示弹出层和遮罩

点击遮罩任意位置隐藏层和遮罩那么如下:$("#content").fadeOut(200);$("#bg").fadeOut(200);

时间： 2024-10-10 15:48:28

自定义弹出层居中并显示遮罩的相关文章

自定义弹出层！

当不能运用框架的弹出层时,自定义简单的弹出层! <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <head> <title>弹出层</title> <script src="jquery-1.6.2.min.js" type="text/javascript

自定义弹出层

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> <meta content="

1.让层始终显示在屏幕正中间: 样式代码: Html代码 .model{ position: absolute; z-index: 1003; width:320px; height:320px; text-align:center; background-color:#0066FF; display: none; } jQuery代码: Js代码 //让指定的DIV始终显示在屏幕正中间 function letDivCenter(divName){ var top = ($(windo

遮罩层、弹出层

1.实现原理 * 实际上弹出层.遮罩层和原页面显示分别为三个不同的div * 弹出层的层级在遮罩层之上,遮罩层的层级在原页面显示之上: * 遮罩层有通明效果 * 遮罩层没有实际意义,则无需在html部分就写上,当然写上同样可以实现 2.代码实现 html语言如下: <body> <center> <div ><input type="button" value="go" onclick="s

遮罩层和弹出层（居中）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>居中弹出层</title> </head> <body> <button class="Click">点击</button> <style> body{margin:0;padding:0;} .popWrap{pos

弹出层带遮罩显示在屏幕正中间

最近项目中用到了遮罩层,在这里总结下以备下次使用. 首先,遮罩应全屏,同时需要兼容多种浏览器,需要设置div的样式为: 复制代码 1 position:absolute; 2 top:0%; /**遮罩全屏top,left都为0,width,height为100%**/ 3 left:0%; 4 width:100%; 5 height:100%; 6 filter:alpha(opacity=50); 7 opacity: 0.5; 8 -moz-opacity:0.5; 9 -khtml-o

js制作带有遮罩弹出层实现登录小窗口

要实现的效果如下点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并且遮罩层笼罩整个页面,使整个页面的其他元素暂时失去行为. 遮罩层的实现:相对于body绝对定位,宽度和高度都和body相同,并且有一定的透明度,使得下面的元素能够被看到.原先的元素的z-index为0,遮罩层的z-index在弹出登录小窗口和原先元素的之间. 说的不是很清楚,还是看代码吧! <!DO

JS通过设置cookie来控制弹出层，首次打开页面显示弹出层

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>JS通过设置cookie来控制弹出层,首次打开页面显示弹出层,刷新页面不再显示:关闭浏览器重新打开.清除缓存cookie显示.</title&

jquery制作弹出层带遮罩效果，点击阴影部分层消失

jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 1 <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">jquery点我弹出</a> 2 <div id="myModal" class="reveal-modal&quo