<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冒泡弹窗</title>
<script src="js/vue.js"></script>
<style> /* 账号密码输入框在屏幕正* */
#d2{
background: rgba(0,0,0,0.6);
width: 100%;
margin: auto;
position: fixed;
top:0;
left:0;
right:0;
bottom: 0;
}
#d3{
background: #ffff;
border-radius: 5px; /* 边框圆角 */
padding-top: 15px;
padding-left:30px;
padding-bottom: 15px;
width:290px;
height:160px;
position: fixed;
margin: auto;
left: 0; /* 当上下左右的距离窗口一样的时候，输入框就会被置于屏幕正中间 */
right:0;
top:0;
bottom: 0; } </style>
</head> <body> <div id="d1">
<h1 @click="is_show=true">点击产生窗口</h1>
<div id="d2" v-show="is_show" @click="is_show=false">
<!--<div id="d3" v-show="is_show" @click="is_show=false">-->
<div id="d3" @click.stop="">
账号: <input type="text"><br><br>
密码: <input type="password"><br><br>
<input type="submit" value="提交">
</div>
</div> </div> <script>
let vm = new Vue({
el: "#d1",
data: {
is_show: false,
},
methods: {}, }) </script>
</body>
</html>
阻止冒泡弹窗