<!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>