jquery 点击div外关闭弹框

jquery点击目标DIV以外关闭效果

$(function(){ $(".cover").hide(); $("#call").click(function(){ console.log("弹出"); $(".cover").fadeIn(300,"swing"); event.stopPropagation(); //阻止冒泡触发$(document).click() }) $(".left-btn,.right-btn"

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

效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" @click="showModal=false"></div> <div class="pop" v-if="showModal"> <button @click="showModal=false&quo

vue 点击弹窗外框关闭弹框

https://blog.csdn.net/zjw0742/article/details/77822777 ready() { document.addEventListener('click', (e) => { if (!this.$el.contains(e.target)) this.show = false }); }

JS部分 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script type="text/javascript"> jQuery(document).ready(function ($) { if (window.history && window.history.pushState) { $(window).on('p

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

简单数学算法demo和窗口跳转,关闭,弹框demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn&quo

js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一:这个问题通常的办法是使用阻止事件冒泡来实现,代码如下(省略css): <body> <button id="btn1" onclick="alertBoxFn();stopBubble()">打开弹窗</button> <di

checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中

checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { display: inline-block; width: 100px; margi

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

1.打开弹窗调用 window.history.pishState() 函数 2.关闭弹框 3.mounted 生命周期监听popstate 事件 4.beforeDestroy 生命周期移除popstate 事件个人觉得这种方法虽然实现了效果,但并不完美,比较繁琐.希望有好建议的留言!

jquery点击弹框外层关闭弹框

$(document).bind("click",function(e){ if($( e.target ).closest(".game-container").length == 0){ alert(111); $(".game-container").hide();//game-container是弹框的样式名称 }else{

jquery实现点击页面空白处，弹框消失

要求:点击1,弹框2显示,点击空白处,弹框2消失 $("#AddDevices"):按钮1 $(".addDeviceBox")弹框2 //点击添加设备弹框 $("#AddDevices").click(function(event){ event.stopPropagation();//阻止事件冒泡 $(".addDeviceBox").show(); //点击空白处,下拉框隐藏-------开始 var tag =$(&q

jquery mobile将页面内容当成弹框进行显示

注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> <div data-role="header" > <h1>头部</h1> </div> <div role="main" > <a href="#pagetwo" data-tra

js在点击的按钮下面弹框

效果如图,点击对应的按钮时,弹框会在对应的按钮下面显示,可以应用于列表等场景前端代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="解密.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

jQuery实现鼠标点击div外的地方div隐藏消失的效果（转）

转:https://www.cnblogs.com/jsingleegg/p/3456152.html css部分: <style type="text/css">.pop { width:200px; height:130px; background:#080;}</style> 样式与JS部分: <body> <script type="text/javascript" src="http://ajax.goo

jQuery实现鼠标点击div外的地方div隐藏消失的效果

css部分: <style type="text/css"> .pop { width:200px; height:130px; background:#080;} </style> 样式与JS部分: <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&q

jQuery实现点击div外的区域，来隐藏指定节点

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).bind('click', function

【 js 片段】点击空白或者页面其他地方，关闭弹框

$(document).mouseup(function(e){ var _con = $(' 目标区域 '); // 设置目标区域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 some code... // 功能代码 } }); /* Mark 1 的原理:判断点击事件发生在区域外的条件是:1. 点击事件的对象不是目标区域本身2. 事件对象同时也不是目标区域的子元素*/ 原文地址:https:/

jquery实现点击div外隐藏div

html <div style="width:100px;height:100px;border:1px solid #ff0" id="div">div</div> js document.on("click",function(e){ if($(e.target).closest("#div").length=0){ $("#div").hide(); } })

Jquery点击div之外的地方隐藏当前div

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <title></title> <script type="text/javascript&

jquery点击div以外的区域触发事件

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网页特效展示中心</title> <style type="text/css"> #testa,#testa2{position:relative;} #pop,#pop2 { width:100

jQuery点击div其他地方隐藏div

$(document).bind("click",function(e){ var target = $(e.target); ){ $("#regionlist").hide(); } })

关于点击弹框外部区域弹框关闭的交互处理（前端JS）

常见需求场景前端在处理交互的时候,经常遇到这样的场景,点击一个按钮,出现一个弹框,点击外部区域,弹框关闭. 解决方法思路说明: 1.给弹框的div父级都加个类名,如: 2.在document绑定一个点击事件,获取当前点击元素的类名,开始向上找,找它的父级类名, 2.1. 包含我们加的几个类名,则表示点击的是当前框,不处理: 2.2. 不包含我们加的几个类名,则是外部区域,关闭当前显示框: 代码实现 // 添加点击事件 document.addEventListener('click', e