弹框的一种简单css用法

来源:互联网 发布:工业造型设计书籍知乎 编辑:程序博客网 时间:2024/05/20 23:02
<div class="coverbox">  <div class="covercont">      <div class="covernav">         <span class='close'><img src="/style/images/close.png" style='width:60%;'></span>      </div>      <div class="coverbody">        <div class="coverinfo">        </div>        <div class="coverhiden">        </div>      </div>  </div>/*弹框*/.coverbox{    display: none;    position: fixed;    z-index: 10000;    top: 0;    bottom: 0;    left: 0;    right: 0;    overflow: hidden;    background: rgba(0,0,0,.6);    width: 100%;    height: 100%;    margin: 0 auto;    padding:10% 10%;}.covercont{    position: relative;    overflow: hidden;    margin: auto;    /*width: 100%;*/    width:700px;    padding-bottom: 44px;    background: #fff;}.covernav{    position: absolute;    left:0;    top: 0;    height: 44px;    overflow: hidden;    width: 100%;}.close{    display: inline-block;    width: 44px;    height: 44px;    line-height: 44px;    text-decoration: none;    font-size: 1.4em;    text-align: center;    line-height: 2em;    cursor:pointer;}.coverbody{    height:100%;    margin-top: 44px;    padding:0 3em;    overflow-x: hidden;}
原创粉丝点击