1.點擊空白關閉

最簡單的vue

<div @click="tan">點擊談窗2</div><div class="tanchuang" v-if="showTan" @click="Close"><div class="content" @click.stop="toGo"> //阻止冒泡這是很重要的彈窗內容</div></div>tan() {this.showTan = true;},Close() {this.showTan = false;},toGo() {}

2.背景虛化

background: rgba(10, 10, 10, 0.7);opacity:0.4 //是整個頁面透明，文字也會透明

3.防止穿透

https://www.cnblogs.com/padding1015/p/10568070.html
第一種方法可以，第二種監聽‘touchmove’失敗了

tan() {this.showTan = true;document.body.style.overflow = 'hidden';document.body.style.position = 'fixed'; //果然是因為加了fixed，就會自動回滾到頂部},Close() {this.showTan = false;document.body.style.overflow = 'auto';document.body.style.position = 'static';},

總結

以上是生活随笔為你收集整理的弹窗的点击空白关闭，背景虚化，防止滚动穿透的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。