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