模态框的实现

类似如下的效果

image.png

当点击上面的打开按钮时，弹出弹框，这时只能操作弹框，其他的都无法操作。

实现原理：
结构上分为两个部分：弹框和遮挡层；需要对两者应用position: absolute，然后使用z-index来设置层叠，使得弹出弹框时只能操作弹框，因此弹框的z-index需设置最大，其次是遮挡层的，用于遮挡住其他元素，当点击在弹框外的位置时，其实点击到的是遮挡层，因此遮挡层的width: 100%; height: 100%（注意：要使遮挡层的height:100%生效，必须设置html和body的height: 100%）

html部分：

• 添加一个<div class="fade"></div> 表示遮挡层，该标签是作为body的直接子元素
• 添加弹框的html标签，假设是<div class="dialog"></div>，为了叙述方便，将该标签里面的元素省略掉

css部分：

html,
    body {
        height: 100%;
    }

    .fade-active{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 100;
      opacity: .5;
      background-color: #ccc;
    }

    .dialog {
        position: absolute;
        z-index: 500;
        left: 50%;
        top: 30%;
      
        background: #eee;
        width: 328px;
        box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    }

当点击打开按钮时，为class='fade'的div添加fade-active的类，用于生成遮挡层的效果