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>&lt;system.web&gt;
    &lt;httpHandlers&gt;
      &lt;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> /&gt;
    &lt;/httpHandlers&gt;<span style="color: #000000;">
    ..........
  </span>&lt;/system.web&gt;  </pre>
                </div>
                <p>&nbsp;</p>
                <p>说明如下：<br />
                  verb可以是&ldquo;POST&rdquo;或 &ldquo;GET&rdquo;，表示对GET或POST的请求进行处理。&ldquo;*&rdquo;表示对所有的请求进行处理。<br />
                  <br />
                  path指明相对应的文件进行处理，"*.aspx" 表示对发给所有的ASPX页面的请求进行处理，也可以指明路径，<br />
                  如，&ldquo;/test/*.aspx&rdquo; 表明只对test目录下的aspx文件进行处理。<br />
                  <br />
                  type属性中，指明要进行处理的类名，但是这个类名一定要继承IHttpHandler这个接口。</p>
                <p>例子中WebHttpHandler指的是名称空间，MyHandler指的是继承IHttpHandler这个接口的类。</p>
                <p>&nbsp;</p>
                <p>HttpHandler：</p>
                <p>HttpHandler是HTTP请求的处理中心，真正地对客户端请求的服务器页面做出编译和执行，并将处理过后的信息附加在HTTP请求信息流中再次返回到HttpModule中。<br />
                  &nbsp;HttpHandler与HttpModule不同，一旦定义了自己的HttpHandler类，那么它对系统的HttpHandler的关系将是&ldquo;覆盖&rdquo;关系。</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>&nbsp;</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 &copy; jack_Meng </p>
  </div>
</div>
</body>
</html>

参考出处：

时间： 2024-08-25 21:47:18

js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)的相关文章

js css 实现遮罩层

<div style=" position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; background-color: Black; z-index: 9999; filter: alpha(opacity=70); Opacity:0.7;"></div> z-index 必须大于遮罩元素 demo <!doctype html> <html> <head&g

bootstrap 模态框中弹出层 input不能获得焦点且不可编辑

bootstrap 模态框中弹出层 input不能获得焦点且不可编辑 问题描述:bs框架支持一层model层的情况下,在模态框中弹出了自定义的弹出层.发现自定义弹出层的输入框不能获得焦点且不可编辑. 解决方法:去除模态框中的"tabindex"属性. <div class="modal fade" tabindex="-1" role="dialog" id="myModal" data-backdr

layui中弹出层的两种表达方式

方式一: 定义js中定义html变量 方式二: 设置div :hidden:hidden 布局 数据表格自适应大小: 代码: <style> .btn-container { margin-bottom: 10px; } .layui-table-cell .layui-form-checkbox[lay-skin=primary] { top: 5px; } </style> <div class="layui-fluid"> <div cl

JS只弹出一个居中弹出窗口

var newWindow;//定义一个窗口,有利于窗口间的通讯function makeNewWindow(url) {   if (!newWindow || newWindow.closed) {        var width = 400;        var height = 300;        var left = parseInt((screen.availWidth/2) - (width/2));//屏幕居中        var top = parseInt((scr

js点击任意区域弹出层消失，js点击弹出层之外的任意区域弹出层消失,常见弹层的封装

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <style type="text/css"> *{margin:0;padding:0;} .warp{overflow:hidden;} .div1,.div2,.div3,.div4{wi

gulp最佳实践（包含js,css,html预编译，合并，压缩,浏览器自动刷新）

gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name": "autopractice", "version": "1.0.0", "description": "", "main": "index.js", "sc

移动端弹出层之后禁用底部滚动条关闭回到原位置

$("cli-open").click(function(){ var scrollTop = document.body.scrollTop;//保存点击前滚动条的位置 window.onscroll=function(){ document.body.scrollTop = scrollTop;//赋值给滚动条的位置 }}) $(".cli-close").click(function(){ window.onscroll=function(){ documen

遮罩层和弹出层（居中）

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

JS简易弹出层手机版

简单说明 手机弹出层模枋了WEIUI.弹出层原理还是依照bootstrap 去掉了PC端的ESC关闭.点击背景层时也不默认关闭. 模板样子 CSS样式 /*弹出时给body加上这个,关闭时去掉*/ .overhide { overflow: hidden; } /*关键样式 遮罩层的*/ .msgboxshadow { position: fixed; /*固定定位*/ left: 0; top: 0; right: 0; bottom: 0; opacity: .5; /*背景透明度.这里没有