html实现弹框,并伴随遮罩层,且弹框居中

    本文介绍的内容主要实现的功能有,出现弹框,并且伴随遮罩层,且弹框一直居中。

html和js代码:

<div id="hidebg"></div>
    <div id="hidebox" onClick="hidebox();">
        <div>
            <p class="box-head">温馨提示</p>
            <div class="hidebox-hr"><hr/></div>
            <p class="box-textarea">您暂时没有查看权限,请联系客服获取权限哦~<p>
            <div class="boxbtn">
               <a class="clickbtn cancel" href="javascript:void(0);" οnclick="hidebox();">取消</a>
               <a class="clickbtn confirm" href="javascript:void(0);" οnclick="contact();">联系客服</a>
            </div>
        </div>
    </div>
<div><a href="javascript:void(0);" οnclick="showbox();"></div>

function showbox() //显示隐藏层和弹出层
{
var hideobj=document.getElementById("hidebg");
hidebg.style.display="block"; //显示隐藏层
hidebg.style.height=document.body.clientHeight+"px"; //设置隐藏层的高度为当前页面高度
document.getElementById("hidebox").style.display="block"; //显示弹出层
}
function hidebox() //去除隐藏层和弹出层
{
document.getElementById("hidebg").style.display="none";
document.getElementById("hidebox").style.display="none";
}
function contact(){
document.getElementById("hidebg").style.display="none";
document.getElementById("hidebox").style.display="none";
window.open("url");
}

  css代码:

    

#hidebg { position:absolute;left:0px;top:0px;
    background-color:#000;
    width:100%;  /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
    filter:alpha(opacity=60);  /*设置透明度为60%*/
    opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
    display:none; /* http://www.jb51.net */
    z-Index:2;
}
#hidebox { position:fixed;
           _position: absolute;
           margin:0;
           width:400px;
           height:192px;
           top:40%;
           left:40%;
           background-color:#fff;
           display:none;
           cursor:pointer;
           z-Index:3;
           text-align: center;

        }
#content {
          text-align:center;
          cursor:pointer;
          z-Index:1;
          }
.box-head{
     font-size: 18px;
     padding-top: 18px;
     padding-bottom: 10px;
}
.box-textarea{
    font-size: 14px;
    padding-top: 30px;
    padding-bottom: 32px;
}
.hidebox-hr{
    width: 384px;
    text-align: center;
    /* padding: 0; */
    padding-left: 8px;
}
.clickbtn{
    display: block;
    width: 107px;
    height: 33px;
    border-radius: 3px;
    font-size: 18px;
}
.cancel{
    background-color: #ededed;
    float: left;
    margin-left: 88px;
}
.confirm{
    background-color:#00aed8;
    color: #ffffff;
    float: left;
    margin-left: 22px;
}
.boxbtn{
    width: 100%;
    height: 33px;
    line-height: 33px;
}

     1.遮盖层只需要设置一个div让它铺满全页面,并且z-index 属性设置元素的堆叠顺序设置一下就可以。

         2.弹框始终居中需要设置position:fixed.  top:50%; left:50%; 

          _position:absolute;这句代码的意思是“位置:绝对定位”,也就是说元素的位置是相对于整个浏览器窗口的,而不是相对于父元素。一般要配合top、left属性使用。

 

           专为ie6设置。

         3.position:absolute; 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

          元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

        position:fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。

       元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
4.document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

转载于:https://www.cnblogs.com/qianxinxu/p/5488729.html

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值