js实现遮罩效果

js实现遮罩效果

html

最外层的modal负责包裹整个弹出层
modal-bg是灰色的遮罩
modal-show用来包含内容，内容可以分为三部分：header，content，footer

<div class="modal" v-bind:style="{display:isShow}">
    <div class="modal-bg" v-bind:style="{display:isShow}" @click="modalClose"></div>
    <div class="modal-show" v-bind:style="{display:isShow}">
      <div class="modal-header">
        <h3>{{title}}</h3>
      </div>
      <div class="modal-content">
	      我是123
	  </div>
	  <div class="modal-footer"></div>
    </div>
  </div>

css

  .modal {
    display: none;
  }

  .modal-bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.3;
    opacity: .30;
    filter: alpha(opacity=30);
  }

  .modal-show {
    display: none;
    position: absolute;
    top: 25%;
    left: 32%;
    width: 33%;
    height: auto;
    padding: 8px;
    border: 8px solid #E8E9F7;
    background-color: white;
    z-index: 1002;
    overflow: auto;
  }

  .modal-header {
    margin: 10px;
  }

  .modal-content {
    border: 1px solid lightgray;
    border-radius: 2px;
    text-align: left
  }

js调用

同时设置modal、modal-show、modal-bg的display为block即可显示，反之，同时设置为‘none’则隐藏。