# 弹出层/模态框 ```html <style> .alert {display: none;} .alert_display {display: block;} /* 遮罩 */ .alert > .zhezhao { position: fixed; left: 0; right: 0; bottom: 0; top:0; width:100%; height: 100%; background: #000; filter:alpha(opacity=60); z-index:1000; opacity: 0.6; } /* 本体 */ .alert > .body { width: 200px; height: 80px; position:fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 3px; box-shadow: #888 0 0 8px; padding:15px; z-index: 10000; } </style> <div class="alert" v-bind:class="{ alert_display:model }"> <div class="zhezhao" v-on:click="model=false"></div> <div class="body"> hello </div> </div> <script> var app = new Vue({ el: '#app', data: { // 弹出层异常显示控制 model:true, } }); </script> ```