<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";
}