首页 > 代码库 > js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
原始代码：
<!doctype html><!-- http://www.jb51.net/article/44354.htm --><head><meta charset="utf-8" /><title></title><style type="text/css">* { margin:0; padding:0;}html { _background:url(about:blank);} /**//* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */body { background:#fff; font: 12px/1.5 Tahoma, Geneva, \\5b8b\\4f53, sans-serif; height:100%;}.wrap { height:980px; padding-top:20px; text-align:center;}p { font-size:14px; text-align:center; line-height:24px;}/**//** 遮罩层 **/ #masklayer { background:#000; display:none; filter:alpha(opacity = 50); opacity:0.5; top:0; left:0; height:100%; width:100%; z-index:999; position:fixed; _position:absolute;_left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);_top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);}/**//** 弹出层 **/ #Div_popup { display:none; background-color:red; width:200px; z-index:1000; left:50%; top:50%; position:fixed!important; margin-left:-150px !important; _position:absolute;_top:expression(eval(document.compatMode && document.compatMode==‘CSS1Compat‘)? documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /**//*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /**//*IE5 IE5.5*/}.content { background:#f3f3f3; border:1px solid #999;}.content h3 { background:#a0a0a0; color:#fff; font-size:14px; height:32px; line-height:32px; padding-left:5px;}#clickbtn { margin-top:20px;}#img_zfb{ width:100%; height:100%;}</style></head><body><div class="wrap"> <p> 我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br /> 我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br /> 我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br /> 我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br /> 我是正文我是正文我是正文我是正文我是正文我是正文我是正文 </p> <input type="button" id="clickbtn" value="clike me" /></div><div id="masklayer"></div><div id="Div_popup"> <img id="img_zfb" src="http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_12.png"> <p>居中居中居中居中居中居中</p></div><script type="text/javascript"> (function(masklayer){ var clickbtn = document.getElementById(‘clickbtn‘); clickbtn.onclick = function(){ var Div_popup = document.getElementById(‘Div_popup‘); masklayer.style.display=‘block‘; Div_popup.style.display =‘block‘; var h = Div_popup.clientHeight; with(Div_popup.style){ marginTop = -h/2+‘px‘; } } })(document.getElementById(‘masklayer‘)) </script></body></html>
博客园测试代码：
备份css代码
*{ margin:0px; padding:0px; }html{height:100%}.zhezhao{ width:100%; height:12000px; background-color:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; position:absolute; left:0px; top:0px; display:none; z-index:1000; } .div_zfb{ width:80px; height:80px; position:absolute; top:200px; left:50%; background-color:#fff; margin-left:-140px; display:none; z-index:1500; text-align:center; } .custom_hide{ display: none;}.mid{ width:230px; font: 12px black Verdana,Arial,Helvetica,sans-serif; margin:0px auto; text-align:center; }#img_zfb{ width:230px; height:230px;}/*签名*/.autograph { padding: 15px; background-color: #FFF7DC; border: 2px solid #FFBFBF; font-family:"Courier New", 微软雅黑, Consolas, Arial, 宋体;}.custom_hide{ display: none;}.blogds{height:82px;line-height:82px;}a.btn_donate{display: inline-block;width: 82px;height: 82px;background: url("http://files.cnblogs.com/files/yanweidie/btn_reward.gif") no-repeat;_background: url("http://files.cnblogs.com/files/yanweidie/btn_reward.gif") no-repeat;-webkit-transition: background 0s;-moz-transition: background 0s;-o-transition: background 0s;-ms-transition: background 0s;transition: background 0s;}a.btn_donate:hover{cursor:hand; background-position: 0px -82px;background-color:unset !important;}.bold{ font-weight: bold; }/*回到顶部*/#rocket-to-top div{left:0;margin:0;overflow:hidden;padding:0;position:absolute;top:0;width:149px;}#rocket-to-top .level-2{background:url("http://images2015.cnblogs.com/blog/336693/201609/336693-20160929114645844-1059340274.png") no-repeat scroll -149px 0 transparent;display:none;height:250px;opacity:0;z-index:1;}#rocket-to-top .level-3{background:none repeat scroll 0 0 transparent;cursor:pointer;display:block;height:150px;z-index:2;}#rocket-to-top{background:url("http://images2015.cnblogs.com/blog/336693/201609/336693-20160929114645844-1059340274.png") no-repeat scroll 0 0 transparent;cursor:default;display:block;height:250px;margin:-125px 0 0;overflow:hidden;padding:0;position:fixed;right:0;top:80%;width:149px;z-index:11;}
备份签名代码
<script type="text/javascript"> window.onload=function(){ var bt=document.getElementById("btn_donate"); var zhezhao=document.getElementById("zhezhao"); var login=document.getElementById("div_zfb"); zhezhao.onclick=function(){ zhezhao.style.display="none"; login.style.display="none"; document.body.style.height=""; document.body.style.overflow=""; } bt.onclick=function(){ zhezhao.style.display="block"; zhezhao.style.height="100%"; login.style.display="block"; login.style.top=(document.documentElement.clientHeight + 330) + "px";alert(document.documentElement.scrollTop) document.body.style.height="100%"; //document.body.style.overflow="hidden"; } } </script><!-- 支付宝遮罩 --><div class="zhezhao" id="zhezhao"></div> <div class="div_zfb" id="div_zfb"><img id="img_zfb" src="http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_12.png"><br><div class="mid">1321321</div></div> <img id="t_zfb" width="100px" height="100px" src="http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_12.png"><!-- 签名 --><div class="autograph"><p><span style="display: none">如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的<a id="btnRecommendMyBlog">【<strong>推荐</strong>】</a>按钮。<br></span>如果，您希望更容易地发现我的新博客，不妨点击一下绿色通道的<a>【<strong>关注我</strong>】</a>。</p><div class="blogds">如果，想给予我更多的鼓励，<span class="bold">求打</span> <a class="btn_donate" style="position: absolute" id="btn_donate" title="Donate 打赏" target="_self"></a></div><p>因为，我的写作热情也离不开您的肯定支持。</p><p>感谢您的阅读，如果您对我的博客所讲述的内容有兴趣，请继续关注我的后续博客，我是焰尾迭 。</p></div><!-- 火箭 --><div id="rocket-to-top"> <div class="level-2" style="opacity: 0; display: block;"></div> <div class="level-3"></div></div>
测试页面代码
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1" /><title>在web.config中配置httpHandlers节点是的说明 - jack_Meng - 博客园</title><link type="text/css" rel="stylesheet" href="/bundles/blog-common.css?v=m_FXmwz3wxZoecUwNEK23PAzc-j9vbX_C6MblJ5ouMc1"/><link id="MainCss" type="text/css" rel="stylesheet" href="/skins/AnotherEon001/bundle-AnotherEon001.css?v=dNz80TfH9-81kuLR86t4JWgT2tb_J0B779DQM4kw0WU1"/><link type="text/css" rel="stylesheet" href="/blog/customcss/121128.css?v=gKs85g3vThFyo6m7DQF10MQseCY%3d"/><link id="mobile-style" media="only screen and (max-width: 768px)" type="text/css" rel="stylesheet" href="/skins/AnotherEon001/bundle-AnotherEon001-mobile.css?v=e_QVfUeTMKJaQaYv1olAXHEIJXw3W1tp4SPxjnummuY1"/><link title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/mq0036/rss"/><link title="RSD" type="application/rsd+xml" rel="EditURI" href="http://www.cnblogs.com/mq0036/rsd.xml"/><link type="application/wlwmanifest+xml" rel="wlwmanifest" href="http://www.cnblogs.com/mq0036/wlwmanifest.xml"/><script src="//common.cnblogs.com/script/jquery.js" type="text/javascript"></script><script type="text/javascript">var currentBlogApp = ‘mq0036‘, cb_enable_mathjax=false;var isLogined=false;</script><script src="/bundles/blog-common.js?v=E1-LyrzANB2jbN9omtnpOHx3eU0Kt3DyislfhU0b5p81" type="text/javascript"></script></head><style type="text/css">* { margin:0; padding:0;}html { _background:url(about:blank);} /**//* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */body { background:#fff; font: 12px/1.5 Tahoma, Geneva, \\5b8b\\4f53, sans-serif; height:100%;}.custom_hide { display: none;}p { font-size:14px; text-align:center; line-height:24px;}/**//** 遮罩层 **/ #masklayer { background:#000; display:none; filter:alpha(opacity = 50); opacity:0.5; top:0; left:0; height:100%; width:100%; z-index:999; position:fixed; _position:absolute;_left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);_top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);}/**//** 弹出层 **/ #Div_popup { display:none; background-color:red; width:200px; z-index:1000; left:50%; top:50%; position:fixed!important; margin-left:-150px !important; _position:absolute;_top:expression(eval(document.compatMode && document.compatMode==‘CSS1Compat‘)? documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /**//*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /**//*IE5 IE5.5*/}/*图片样式*/#img_zfb { width:100%; height:100%;}/*签名*/.autograph { padding: 15px; background-color: #FFF7DC; border: 2px solid #FFBFBF; font-family:"Courier New", 微软雅黑, Consolas, Arial, 宋体;}.custom_hide { display: none;}.blogds { height:82px; line-height:82px;}a.btn_donate { display: inline-block; width: 82px; height: 82px; background: url("http://files.cnblogs.com/files/yanweidie/btn_reward.gif") no-repeat; _background: url("http://files.cnblogs.com/files/yanweidie/btn_reward.gif") no-repeat; -webkit-transition: background 0s; -moz-transition: background 0s; -o-transition: background 0s; -ms-transition: background 0s; transition: background 0s;}a.btn_donate:hover { cursor:hand; background-position: 0px -82px; background-color:unset !important;}.bold { font-weight: bold;}/*回到顶部*/#rocket-to-top div { left:0; margin:0; overflow:hidden; padding:0; position:absolute; top:0; width:149px;}#rocket-to-top .level-2 { background:url("http://images2015.cnblogs.com/blog/336693/201609/336693-20160929114645844-1059340274.png") no-repeat scroll -149px 0 transparent; display:none; height:250px; opacity:0; z-index:1;}#rocket-to-top .level-3 { background:none repeat scroll 0 0 transparent; cursor:pointer; display:block; height:150px; z-index:2;}#rocket-to-top { background:url("http://images2015.cnblogs.com/blog/336693/201609/336693-20160929114645844-1059340274.png") no-repeat scroll 0 0 transparent; cursor:default; display:block; height:250px; margin:-125px 0 0; overflow:hidden; padding:0; position:fixed; right:0; top:80%; width:149px; z-index:11;}</style><script type="text/javascript"> window.onload=function(){ var bt=document.getElementById("btn_donate"); var zhezhao=document.getElementById("masklayer"); (function initMask(){ var masklayer = document.getElementById(‘masklayer‘); var clickbtn = document.getElementById(‘btn_donate‘); var divImg=document.getElementById("Div_popup"); clickbtn.onclick = function() { var Div_popup = document.getElementById(‘Div_popup‘); masklayer.style.display=‘block‘; Div_popup.style.display =‘block‘; var h = Div_popup.clientHeight; with(Div_popup.style) { marginTop = -h/2+‘px‘; } } masklayer.onclick=function(){ masklayer.style.display="none"; divImg.style.display="none"; //document.body.style.height=""; //document.body.style.overflow=""; }})()} </script><body><a name="top"></a><div id="wrapper"> <div id="header"> <div id="top"> <h1><a id="Header1_HeaderTitle" class="headermaintitle" href="http://www.cnblogs.com/mq0036/">jack_Meng</a></h1> <div id="subtitle"></div> </div> <div id="sub"> <div id="blog_stats"> <div class="BlogStats">随笔 - 775, 文章 - 1, 评论 - 111, 引用 - 0</div> </div> </div> </div> <div id="main_container"> <div id="main_content"> <div id="content"> <div id="post_detail"> <div class="post"> <h2> <a id="cb_post_title_url" href="http://www.cnblogs.com/mq0036/p/7018612.html">在web.config中配置httpHandlers节点是的说明</a> </h2> <div class="postbody"> <div id="cnblogs_post_body"> <div class="cnblogs_code"> <pre><system.web> <httpHandlers> <add verb=<span style="color: #800000;">"</span><span style="color: #800000;">*</span><span style="color: #800000;">"</span> path=<span style="color: #800000;">"</span><span style="color: #800000;">*.lcj</span><span style="color: #800000;">"</span> type=<span style="color: #800000;">"</span><span style="color: #800000;">WebHttpHandler.MyHandler</span><span style="color: #800000;">"</span> /> </httpHandlers><span style="color: #000000;"> .......... </span></system.web> </pre> </div> <p> </p> <p>说明如下：<br /> verb可以是“POST”或 “GET”，表示对GET或POST的请求进行处理。“*”表示对所有的请求进行处理。<br /> <br /> path指明相对应的文件进行处理，"*.aspx" 表示对发给所有的ASPX页面的请求进行处理，也可以指明路径，<br /> 如，“/test/*.aspx” 表明只对test目录下的aspx文件进行处理。<br /> <br /> type属性中，指明要进行处理的类名，但是这个类名一定要继承IHttpHandler这个接口。</p> <p>例子中WebHttpHandler指的是名称空间，MyHandler指的是继承IHttpHandler这个接口的类。</p> <p> </p> <p>HttpHandler：</p> <p>HttpHandler是HTTP请求的处理中心，真正地对客户端请求的服务器页面做出编译和执行，并将处理过后的信息附加在HTTP请求信息流中再次返回到HttpModule中。<br /> HttpHandler与HttpModule不同，一旦定义了自己的HttpHandler类，那么它对系统的HttpHandler的关系将是“覆盖”关系。</p> <p>IHttpHandler接口声明:</p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">interface</span><span style="color: #000000;"> IHttpHandler { </span><span style="color: #0000ff;">bool</span> IsReusable { <span style="color: #0000ff;">get</span><span style="color: #000000;">; } </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span> ProcessRequest(HttpContext context); <span style="color: #008000;">//</span><span style="color: #008000;">请求处理函数 </span>} </pre> </div> <p> </p> <p>出处：http://blog.csdn.net/joyhen/article/details/8747509</p> </div> <div id="MySignature" style="display: block;"> <!-- 支付宝遮罩 --> <div id="masklayer"></div> <div id="Div_popup"> <img id="img_zfb" src="http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_12.png"> <p>您的资助是我最大的动力！金额随意,欢迎来赏！</p> <!-- 欢迎资助我持续写作，金额随意,欢迎来赏！ --> </div> <!-- 签名 --> <div class="autograph"> <p> <span style="display: none"> 如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的<a id="btnRecommendMyBlog">【<strong>推荐</strong>】</a>按钮。<br> </span> 如果，您希望更容易地发现我的新博客，不妨点击一下绿色通道的<a>【<strong>关注我</strong>】</a>。</p> <div class="blogds">如果，想给予我更多的鼓励，<span class="bold">求打</span> <a class="btn_donate" style="position: absolute" id="btn_donate" title="Donate 打赏" target="_self"></a> </div> <p>因为，我的写作热情也离不开您的肯定支持。</p> <p>感谢您的阅读，如果您对我的博客所讲述的内容有兴趣，请继续关注我的后续博客，我是焰尾迭 。</p> </div> <!-- 火箭 --> <div id="rocket-to-top"> <div class="level-2" style="opacity: 0; display: block;"></div> <div class="level-3"></div> </div> </div> <div class="clear"></div> <div id="blog_post_info_block"> <div id="BlogPostCategory"></div> <div id="EntryTag"></div> <div id="blog_post_info"> </div> <div class="clear"></div> <div id="post_next_prev"></div> </div> </div> <p class="postfoot"> posted on <span id="post-date">2017-06-15 16:37</span> <a href=‘http://www.cnblogs.com/mq0036/‘>jack_Meng</a> 阅读(<span id="post_view_count">...</span>) 评论(<span id="post_comment_count">...</span>) <a href ="https://i.cnblogs.com/EditPosts.aspx?postid=7018612" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(7018612);return false;">收藏</a> </p> </div> <script type="text/javascript">var allowComments=true,cb_blogId=121128,cb_entryId=7018612,cb_blogApp=currentBlogApp,cb_blogUserGuid=‘33513f9f-ba13-e011-ac81-842b2b196315‘,cb_entryCreatedDate=‘2017/6/15 16:37:00‘;loadViewCount(cb_entryId);</script> </div> <a name="!comments"></a> <div id="blog-comments-placeholder"></div> <script type="text/javascript">var commentManager = new blogCommentManager();commentManager.renderComments(0);</script> <div id=‘comment_form‘ class=‘commentform‘> <a name=‘commentform‘></a> <div id=‘divCommentShow‘></div> <div id=‘comment_nav‘><span id=‘span_refresh_tips‘></span><a href=‘javascript:void(0);‘ onclick=‘return RefreshCommentList();‘ id=‘lnk_RefreshComments‘ runat=‘server‘ clientidmode=‘Static‘>刷新评论</a><a href=‘#‘ onclick=‘return RefreshPage();‘>刷新页面</a><a href=‘#top‘>返回顶部</a></div> <div id=‘comment_form_container‘></div> <div class=‘ad_text_commentbox‘ id=‘ad_text_under_commentbox‘></div> <div id=‘ad_t2‘></div> <div id=‘opt_under_post‘></div> <div id=‘cnblogs_c1‘ class=‘c_ad_block‘></div> <div id=‘under_post_news‘></div> <div id=‘cnblogs_c2‘ class=‘c_ad_block‘></div> <div id=‘under_post_kb‘></div> <div id=‘HistoryToday‘ class=‘c_ad_block‘></div> <script type=‘text/javascript‘> fixPostBody(); setTimeout(function () { incrementViewCount(cb_entryId); }, 50); deliverAdT2(); deliverAdC1(); deliverAdC2(); loadNewsAndKb(); loadBlogSignature(); LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid); GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate); loadOptUnderPost(); GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate); </script> </div> </div> </div> <div id="leftmenu"> <h3>导航</h3> <ul> <li> <a id="blog_nav_sitehome" href="http://www.cnblogs.com/">博客园</a></li> <li> <a id="blog_nav_myhome" class="two_words" href="http://www.cnblogs.com/mq0036/">首页</a></li> <li> <a id="blog_nav_newpost" rel="nofollow" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a></li> <li> <a id="blog_nav_contact" accesskey="9" class="two_words" rel="nofollow" href="https://msg.cnblogs.com/send/jack_Meng">联系</a></li> <li> <a id="blog_nav_rss" class="two_words" href="http://www.cnblogs.com/mq0036/rss">订阅</a> <a id="blog_nav_rss_image" href="http://www.cnblogs.com/mq0036/rss"><img src="//www.cnblogs.com/images/xml.gif" alt="订阅" /></a> </li> <li> <a id="blog_nav_admin" class="two_words" rel="nofollow" href="https://i.cnblogs.com/">管理</a></li> </ul> <div id="blog-calendar" style="display:none"></div> <script type="text/javascript">loadBlogDefaultCalendar();</script> <meta name="vs_showGrid" content="False"> <h3>公告</h3> <div id="blog-news"></div> <script type="text/javascript">loadBlogNews();</script> <div id="blog-sidecolumn"></div> <script type="text/javascript">loadBlogSideColumn();</script> </div> </div> <div class="clear"></div> <div id="footer"> <p id="footer"> Powered by: <br /> <a id="Footer1_Hyperlink3" NAME="Hyperlink1" href="http://www.cnblogs.com/" style="font-family:Verdana;font-size:12px;">博客园</a> <br /> Copyright © jack_Meng </p> </div></div></body></html>
参考出处：
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。