模态框

<div id="modal-overlay">

  <div class="modal-data">

    <p>模态对话框

    <p @click="overlay">点击这里关闭

</div>

/* 定义模态对话框外面的覆盖层样式 */

#modal-overlay {

visibility:hidden;

  position:absolute;  /* 使用绝对定位或固定定位  */

  left:0px;

  top:0px;

  width:100%;

  height:100%;

  text-align:center;

  z-index:1000;

  background-color:#333;

  opacity:0.5;  /* 背景半透明 */

}

/* 模态框样式 */

.modal-data{

width:300px;

  margin:100px auto;

  background-color:#fff;

  border:1px solid #000;

  padding:15px;

  text-align:center;

  color:#333;

}

overlay(){

var e1 = document.getElementById('modal-overlay');

  e1.style.visibility =  (e1.style.visibility =="visible"  ) ?"hidden" :"visible";

}