弹窗的点击空白关闭，背景虚化，防止滚动穿透

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';},

弹窗的点击空白关闭，背景虚化，防止滚动穿透相关推荐

js点击空白关闭div
点击空白关闭div 1.html <div class="tardiv">div块</div> 2.css div {width: 200px;height ...
Flex里监听mouseDownOutside事件解决弹出窗口点击空白关闭功能
其实当用户在使用 PopUpManager 打开的某个组件外部单击时,会从该组件分派一个mouseDownOutside事件监听该事件就能实现点击空白处关闭窗口的功能 this.addEventLi ...
dialog监听点击空白关闭_为什么App Store打开一片空白？尝试这样解决
作为苹果唯一官方应用商店,App Store的重要性不言而喻.而很多ios用户都曾经遇到过这种情况,就是当你想要进入App Store下载相关软件时,发现点击进入一片空白.今天阿签就来和大家说说,为什 ...
实现点击空白关闭模态框
监听document,当用户点击后,获取点击的id,如果id不是modal则关闭modal 当然还需要注意的是要阻止modal的冒泡事件,不然modal一弹出来之后就又关闭了. 停止冒泡 $(&quo ...
html 点击空白关闭浮层,js中点击空白区域时文本框与隐藏层的显示与影藏问题...
当文本框获得焦点的时候,在文本框的下方显示一个浮动层. 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层. 当用户点击浮动层时,改变文本框的值. function $(id){ retur ...
js实现模态框点击空白关闭
面试的时候被问到了,这个问题我在网上一直没搜索到.不过bootstrap已经实现了. 在学习js事件委托的时候.想到可以解决这个问题. 在document添加点击监听,利用事件的捕获和冒泡,界面上的点 ...
jQuery: 仿select下拉框效果，点击空白关闭弹出层，判断是否被mouseover
1. 方法一 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
html点击空白处关闭,vue中实现点击空白区域关闭弹窗的两种方法
1. 第一种做法首页在外层容器里面取一个名字为main,即ref="main",当bankSwitch为true的时候,弹窗出现你好我是弹窗里面的内容部分所触发的事件如下: ...
使用js冒泡实现点击空白处关闭弹窗
什么是事件冒泡? 如图:在一个对象上触发某类事件(比如单击onclick事件),这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶 ...

弹窗的点击空白关闭，背景虚化，防止滚动穿透

1.点击空白关闭

2.背景虚化

3.防止穿透

弹窗的点击空白关闭，背景虚化，防止滚动穿透相关推荐

最新文章

热门文章