jQuery设置div居中及实现遮罩层

jQuery设置div居中及实现遮罩层

这里主要讲遮罩层

web前端开发，写网站静态页面时经常遇到些遮罩层和设置div（物体）居中。

这里又我自己写的一个实例，提供参考。

一、效果图

效果图1：

效果图2：

这两张图片看是没有什么区别，可以说做起来可就没那么容易咯（这个问题我可是弄了半天呢。）

第一张：内容比较少 ，只有获取浏览器的高度就可以

var sW=$(window).height();

第二张：内容比较多，就要获取body的高度

var sB=$('body').height();

 其实呢，做出来也简单，只要判断就可以了

二、代码

js代码

遮罩层

//显示遮罩层     function showScreen(){       var bodyH=$('body').height();//body的高度       var windowH=$(window).height();//浏览器的高度        /*         判断如果body的高小于浏览器(window)的高那么         body的高就等于浏览器(window)的高       */       //判断       if(bodyH<windowH){             bodyH=windowH;       }       /*       body的宽 也可以是浏览器的宽       var sW=$(window).width();       */       var sW=$('body').width();       //显示遮罩层       $('.lock').css({                       //遮罩层的样式              height:bodyH,               //遮罩层的高是body内容的高              width:sW,                     //遮罩层的宽是body内容的宽              display:"block"             //显示遮罩层          });          $('#hintBox').css('display','block');//提示框 }

设置物体居中

$(function(){          //提示框设置居中         var top=($(window).height()-$('#hintBox').height())/2;         //高度==浏览器的高-div（$('#hintBox')）的高/2         var left=($(window).width()-$('#hintBox').width())/2;        //宽度同上        $('#hintBox').css('top',top).css('left',left);        //改变浏览器窗口时也居中        window.οnresize=function(){              var top=($(window).height()-$('#hintBox').height())/2;              var left=($(window).width()-$('#hintBox').width())/2;              $('#hintBox').css('top',top).css('left',left);         };             //关闭提示框（这个就不用太在意 ）       $('.btn_hint').click(function(){           $('#hintBox').css('display','none');           $('.lock').css('display','none')           $('.finish').css('background','#ffffff');        });           });

css代码

#hintBox{     width: 12rem;     height: 6.00rem;     background: #FFFFFF;     position:fixed;     top: 0px;     left:0px;     z-index: 9999;     /* margin: -3.025rem 0.000rem 0.000rem -6.025rem; */     overflow: hidden;     border-radius: 2px;     display: none; } #hintBox h1{     height: 1.25rem;     line-height: 1.25rem;     font-size: 0.65rem;     text-align: center;     color: #353535;     display: block;     padding: 0px 0.25rem;} #hintBox p{     line-height: 0.75rem;     font-size: 0.60rem;     color: #888888;     display: block;     text-align: center;     margin: 0.25rem auto;     padding: 0px 0.125rem;     min-height: 2.5rem;     border-bottom: 1px solid #D9D9D9;      } #hintBox .btn_hint{     width: 2rem;     line-height: 0.75rem;     background: #ececec;     display: block;     font-size: 0.55rem;     color: #09bb07;     border: 0px;     border-radius: 2px;     margin: 0.5rem auto;     padding: 0.055rem 0px ;     cursor: pointer;     } .lock{ //遮罩层的样式     background: #000000;     position: absolute;     top: 0px;     left: 0px;     filter:alpha(opacity=30); /*IE滤镜，透明度50%*/     -moz-opacity:0.3; /*Firefox私有，透明度50%*/     opacity:0.3;/*其他，透明度50%*/     z-index: 999;     display: none;    }

HTML 代码

<article class="listBox finish"  οnclick="showScreen();">     <a  href="javascript:void(0)" class="surveyList">       <h1>4问卷调查，问卷调查问卷调查问卷调查</h1>       <p>         问卷调查，问卷调查问卷调查问卷调查         问卷调查，问卷调查问卷调查问卷调查         问卷调查，问卷调查问卷调查问卷调查         问卷调查，问卷调查问卷调查问卷调查       </p>       <div class="survey_tg_ed">         <span>2016-11-8</span>           <em  class="goed">已结束</em>       </div>     </a>     </article>                    <!--弹出提示框 begin-->   <section id="hintBox">       <h1>提示</h1>       <p>温馨提示，该问卷已经过期</p>       <input type="button" name="" id="" value="确定" class="btn_hint" />   </section>   <!--弹出提示框 end--> <!--遮罩层 begin-->   <div class="lock"></div> <!--遮罩层 end-->

                                                                完

有待完善！