mounted() {
//点击任意位置关闭区域弹窗
document.addEventListener('click', (e) => { //获取弹窗对象
const userCon = document.getElementsByClassName('tanKuang')[0];
const userCon1 = document.getElementsByClassName('tanKuang')[1]; //判断弹窗对象中是否包含点击对象
if (userCon && !userCon.contains(e.target)&& !userCon1.contains(e.target)) {
//如果包含则跳转回之前的页面
this.isShowModal = false;
} }) },

vue中点击其他任意位置关闭弹框的更多相关文章

  1. vue中点击屏幕其他区域关闭自定义div弹出框

    直接上代码: mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('. ...

  2. vue中点击空白处隐藏弹框(用指令优雅地实现)

    在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div c ...

  3. 点击任意位置关闭(CocosCreator)

    推荐阅读:  我的CSDN  我的博客园  QQ群:704621321  我的个人博客       今天,接触到一个新功能,当弹出某个弹框时,需要点击除弹框的剩余任意位置,来关闭该弹框,例如:当红框内 ...

  4. Android点击其他任意位置收起软键盘

    在Android应用开发中,经常出现这样的需求,用户在输入文字的过程中,可能不想继续输入了,通过滑动或者点击其他位置(除软键盘和EditText以外的任何位置),希望能够自动收回键盘,这个功能可能有些 ...

  5. vue 手机物理返回键关闭弹框

    1.打开弹窗调用 window.history.pishState() 函数 2.关闭弹框 3.mounted 生命周期 监听popstate 事件 4.beforeDestroy 生命周期 移除po ...

  6. 简单数学算法demo和窗口跳转,关闭,弹框

     简单数学算法demo和窗口跳转,关闭,弹框demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  7. vue中超简单的方法实现点击一个按钮出现弹框,点击弹框外关闭弹框

    效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" ...

  8. jQuery点击自身以外地方关闭弹出层

    转载自:http://blog.163.com/abkiss@126/blog/static/325941002012111754349590/ 主要功能是点击显示,然后通过点击页面的任意位置都能关闭 ...

  9. jq点击按钮打开和关闭弹出层,点击除了当前按钮以外的地方关闭弹出层

    1.html <a id="more" onclick="moreFun()">更多</a> <ul id="moreL ...

  10. 小程序中点击input控件键盘弹出时placeholder文字上移

    最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的" ...

随机推荐

  1. vue 调用 js 获取的今日、本周、本月、本年起始和结束日期

    一.得到今天.昨天.明天日期 function getDate(dates) { var dd = new Date(); var n = dates || 0; dd.setDate(dd.getD ...

  2. vlan划分和设置

    今天用ensp模拟一个交换机vlan的划分和设置 先上拓扑图: 目标要实现每台电脑都能相互ping通并且都能ping通1.1.1.1/30 简单分析一下,先看交换机sw3,sw3直接和路由器相连,要实 ...

  3. java代码审计-SpEL表达式注入

    0x01 前言 Spring Expression Language(简称 SpEL)是一种功能强大的表达式语言.用于在运行时查询和操作对象图:语法上类似于Unified EL,但提供了更多的特性,特 ...

  4. 关于前端JS的一些常用方法和知识

    关于前端数据存储目前只解释有三种:cookie.localStorage.sessionStorage cookie解释:只针对当前session(会话)有效,关闭标签页即失效使用: 1 var ck ...

  5. DNS BIND之dnssec安全

    公司一大早域名解析出问题了,网抓项目都无法抓取到进销存数据. 查询后发现是运维周末重启了dns服务. 网上找到的解决方法: 在BIND的配置文件(/etc/named.conf)中打开DNSSEC选项 ...

  6. 基于 RocketMQ Connect 构建数据流转处理平台

    本文作者:周波,阿里云智能高级开发工程师, Apache RocketMQ Committer . 01 从问题中来的RocketMQ Connect 在电商系统.金融系统及物流系统,我们经常可以看到 ...

  7. js模拟下拉菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. kubernetes 安装cilium

    kubernetes 安装cilium Cilium介绍 Cilium是一个开源软件,用于透明地提供和保护使用Kubernetes,Docker和Mesos等Linux容器管理平台部署的应用程序服务之 ...

  9. [Linux]VMware启动CENOTS7时报"welcome to emergency mode!"【转载】

    1 问题描述 由于通过VMwaer快速克隆了一台CENTOS7.9的虚拟机. 但启动时报如下错误信息 welcome to emergency mode!after logging in ,type ...

  10. 五月二十六日jdbc算法以及数据库

    1.在PreparedStatement创建SQL对象后,调用preparedStatement()方法时,通过占位符?来按照索引进行SQL语句动态执行通过setString()方法和setInt() ...