web端模态框实例

一：html

<button type="button">点击出现弹框</button>
<div class='bg' >
  <div class='modalContent'>
    <div class='title'>标题</div>
    <div class='cansole'>✘</div>
    <div class='contents'>弹出框的内容</div>
  </div>
</div>

二：css

<style media="screen">

      .bg {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        background: rgba(0, 0, 0, 0.4);/*设置弹出层的透明度*/
        overflow: hidden;
        z-index: 1;
      }
      .modalContent {
        border: 1px solid #ccc;
        height: 70%;
        width: 23%;
        position: absolute; /*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/
        margin: 0 auto;
        top: 10%; /*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2; /*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/
        background: white;
      }
      .title
      {
        height: 30px;
        line-height: 30px;
        background: #F5F5F5;
        color:#666;
        padding-left: 10px;
      }
      .cansole
      {
        float: right;
        margin-right: 20px;
        margin-top: 10px;
      }
      .contents
      {
        display: inline-block;
        margin-top: 30px;
        padding-left: 20px;
      }
    </style>