遮罩层和弹出层（居中）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>居中弹出层</title></head><body><button class="Click">点击</button><style>body{margin:0;padding:0;}.popWrap{position:absolute;top:0;width:100%;height:100%;display:none;}//脱离文档流.mask{position: absolute;top:0;width:100%;height:100%;background-color:gray;opacity:0.5;}.popContent{position:fixed;top:50%;left:50%;margin-left:-200px;margin-top:-150px;width:400px;height:300px;background-color:white;}//fixed是关键</style><div class="popWrap"><div class="mask"></div><div class="popContent"></div></div><script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script><script>$(function(){var Height = $(document).height();$(".mask").css({"height":Height+"px"});//满屏遮罩
$(".Click").on("click",function(){$(".popWrap").css({"display":"block"});});$(".mask").on("click",function(){$(".popWrap").css({"display":"none"});});});</script></body>
</html>

主要实现：满屏遮罩和弹出层随滚动条滚动而居中；

转载于:https://www.cnblogs.com/hanbingljw/p/5045305.html

遮罩层和弹出层（居中）相关推荐

element-UI 弹出组件dialog的遮罩层在弹出层的上面 - 解决篇
element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面? bug演示: 代码逻辑调整之后,页面就正常了(代码和效果图 · 见下文): 解决办法: 将dialog组件剪贴到最父级div元 ...
element ui 弹出组件的遮罩层在弹出层的上面的解决方法
element ui 弹出组件的遮罩层在弹出层的上面的解决方法参考文章: (1)element ui 弹出组件的遮罩层在弹出层的上面的解决方法 (2)https://www.cnblogs.com/ ...
element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关
首先弹窗一个水平测试报告.然后点击查看解析又可以弹窗一个框这时我们发现这个解析的框被外面一个遮罩层挡住了. 我把这个水平测试报告的弹窗写在一个组件里面.在组件里面又写了解析的弹窗. 首先查看官网的e ...
layui弹出层第一次打开不居中，第二次才居中
最近在做一个帮助文档,想做一个点击图片放大的功能,于是使用layui的弹出层,代码如下 /* 打开弹出层*/ function openLayer(imgUrl) {var imgUrl = imgU ...
html5相对父元素定位,layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...
CSS基础- 3.14 定位练习-弹出层
文章目录弹出层效果图 HTML代码 CSS代码弹出层效果图弹出层的背景是半透明的蒙层 HTML代码 <!DOCTYPE html> <html lang="en&qu ...
layui弹出层html,layer弹出层
layer 弹出层,怎么只让他弹出一次.在线等我昨天用这个插件的时候也有这个问题,弹出内容大了就居不了中.这是组件不完美的地方,他设置了top和left值,而且是固定的.这种弹出层都是绝对定位的所 ...
html 5 桌面弹窗,HTML5+CSS3+jQuery实现弹出层
我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以在桌面PC ...
jquery 弹出层插件
最近在研究弹出层插件时发现网上很多插件功能很强大,同时插件也很庞大.在这里个人写了一个比较秀珍的弹出层插件. jquery.popdialog.js $(function () {$.fn.PopDi ...

遮罩层和弹出层（居中）

遮罩层和弹出层（居中）相关推荐

最新文章

热门文章