页面悬浮框

最新推荐文章于 2024-03-11 10:43:00 发布

彼岸花2015

最新推荐文章于 2024-03-11 10:43:00 发布

阅读量489

点赞数

本文链接：https://blog.csdn.net/xioawangba/article/details/51626565

版权

实现效果：

主要的代码：

<style  type="text/css">

  #mask{
    background: rgb(0, 0, 0);
    left: 0px;
    top: 0px;
    width: 100%;
    height: 1000px;
    position: absolute;
    filter: alpha(opacity=75);
    opacity: 0.75;
    z-index:1000;
  }
  #login {
    position: fixed;
    left: 30%;
    top: 30%;
    z-index:1001;
  }
  .loginCon {
    width: 670px;
    height: 380px;
      background: #A5A5AB;
    position: relative;

  }

  #close {
    width: 30px;
    height: 30px;
    background: url('/assets/images/close1.png')  no-repeat;
    position: absolute;
    right: 5px;
    top: 5px;
  }


</style>

<script type="text/javascript">

  function opWondow(){
    var sHeight=document.documentElement.scrollHeight;
    var sWidth=document.documentElement.scrollWidth;
//可视区域

    var wheight=document.documentElement.clientHeight;

//创建
    var OMask=document.createElement("div");
    OMask.id="mask";
    OMask.style.height=sHeight+"px";
    OMask.style.width=sWidth+"px";
    document.body.appendChild(OMask);

    var oLogin=document.createElement("div");
    oLogin.id="login";
    oLogin.innerHTML="<div class='loginCon'> <div id='close'></div> </div>";
    document.body.appendChild(oLogin);


    var dHeight=oLogin.offsetHeight;
    var dWidth=oLogin.offsetWidth;

    oLogin.style.left=(sWidth-dWidth)/2+"px";
    oLogin.style.top=(sHeight-dHeight)/2+"px";
    var oClose=document.getElementById("close");

    oClose.οnclick=function(){
      document.body.removeChild(OMask);
      document.body.removeChild(oLogin);
    }

  }

  window.οnlοad=function(){

    var oBtn=document.getElementById("btnLogin");

    oBtn.οnclick=function(){
      opWondow();

    }
  }
</script>

</head>

<body>

<button id="btnLogin">点击</button>

</body>