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

最新推荐文章于 2021-11-24 22:48:10 发布

国家公共更高的

最新推荐文章于 2021-11-24 22:48:10 发布

阅读量447

点赞数

本文链接：https://blog.csdn.net/qq_44934563/article/details/89400877

版权

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.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" "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>


<section id="hintBox">
   <h1>提示</h1>
   <p>温馨提示，该问卷已经过期</p>
   <input type="button" name="" id="" value="确定" class="btn_hint" />
</section>



<div class="lock"></div>

完

有待完善！