点击弹框以外的的地方关闭弹框

2024-08-30

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

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

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

1.html <a id="more" onclick="moreFun()">更多</a> <ul id="moreList" style="display:none"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> 2.实现点击更多按钮弹出moreLise列表,

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

转载自:http://blog.163.com/abkiss@126/blog/static/325941002012111754349590/ 主要功能是点击显示,然后通过点击页面的任意位置都能关闭显示效果,主要是$(document).click的作用开发过程中经常有一些弹出层,弹出后要在点击页面其他地方时自动关闭,下面是实现代码:HTML代码: <div class="down">click</div><div class="con hi

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

<html> <style> .hide{display:none;} </style> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("div.do

【代码笔记】iOS-点击搜索按钮，或放大镜后都会弹出搜索框

一, 效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> #import "CLHSearchBar.h" @interface RootViewController : UIViewController <CLHSearchBarDelegate> @end RootViewController.m #import "RootViewController.h" @in

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

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

div悬浮在屏幕的中间及点击按钮关闭弹出框

#fd { position: fixed; z-index: 999; width: 109px; height: 323px; top: 71%; right: 1%; margin: -50px 0 0 -50px; /*border: 1px solid red;*/ } <div id="fd"> </div> /*点击按钮关闭弹出框*/ <div class="close-btn" style=" backgrou

简单实现弹出弹框页面背景半透明灰，弹框内容可滚动原页面内容不可滚动的效果(JQuery)

弹出弹框效果展示实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.box,因为要在整个窗口显示固定,所以position要设为fixed,background设为灰色半透明,由于要遮住整个显示屏,width和height都设为100%(body和html的width和height也都设为100%); 在遮罩层的div.box里写弹框的div.container,位置相对于父级

点击除元素以外的任意地方隐藏元素js

比如想实现点击列表弹出筛选器,点击其他任意地方关闭筛选器,如图该筛选器class名 $(document).click(function () { $(".subMenu").hide(); }); $(".subMenu").on("click", function (event) { //取消事件冒泡 var e = arguments.callee.caller.arguments[0] || event; //若省略此句,下面的e改为e

vue自己写了一个div菜单，点击按钮展开，点击其他地方关闭这个div菜单

需求是通过点击body页面,在其他地方就关闭这个<div>菜单,给这个div一个id:problemList,但是点击我打开的按钮,不关闭. created () { document.onclick = function () { // 要关闭的div的id (problemList) document.getElementById('problemList').style.display = 'none' } }, 点击按钮打开模态框的方法要写个阻止冒泡事件,不然会点不开 getItme(

简单数学算法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

Popup中ListBox的SelectChange事件关闭弹出窗体后主窗体点击无效BUG

WPF的BUG!弹出框的自定义控件里有Popup, Popup里面放一个ListBox 在ListBox中的SelectionChange事件触发关闭弹出框后,主窗体存在一定概率卡死(但点击标题又能用的BUG) 步骤一: 新建个自定义WPF控件UserControl Xaml代码: <UserControl x:Class="WpfApplication1.UserControl1" xmlns="http://schemas.microsoft.com/winfx/

js之全选即点击全选标签可选择全部复选框

目标效果:网页全选功能,即点击全选标签可选择全部复选框实现代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload=function () //加载全部

【jQuery学习】写一个简单的弹框页面，火狐浏览器有弹框，但IE8没有弹框的原因？

我也是刚学习jQuery,就从官网上下载了jQuery的包,版本是3.2.1 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="script/jquery-3.2.1.js"></s

点击其它地方关闭DIV

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>点击其它地方关闭DIV</title> </head> <body> <input type="text" value="" id="tf"/> <div style="width:

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

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

layui关闭弹出框

layer.close(index) - 关闭特定层 //当你想关闭当前页的某个层时 var index = layer.open(); var index = layer.alert(); var index = layer.load(); var index = layer.tips(); //正如你看到的,每一种弹层调用方式,都会返回一个index layer.close(index); //此时你只需要把获得的index,轻轻地赋予layer.close即可 //如果你想关闭最新弹出的层

Selenium常用API用法示例集----下拉框、文本域及富文本框、弹窗、JS、frame、文件上传和下载

元素识别方法.一组元素定位.鼠标操作.多窗口处理.下拉框.文本域及富文本框.弹窗.JS.frame.文件上传和下载元素识别方法: driver.find_element_by_id() driver.find_element_by_name() driver.find_element_by_class_name() driver.find_element_by_tag_name() driver.find_element_by_link_text() driver.find_element_b

jQuery、layer实现弹出层的打开、关闭功能实例详解

本文主要介绍了jQuery.layer实现弹出层的打开.关闭功能,需要的朋友可以参考下,希望能帮助到大家. 打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层,list.js: 1 2 3 4 5 6 7 8 9 10 11 12 13 $(".add_category,.update").click(function(){ //弹出框 var doMain = $('.domain_name').val(); la

Selenium示例集锦--常见元素识别方法、下拉框、文本域及富文本框、鼠标操作、一组元素定位、弹窗、多窗口处理、JS、frame、文件上传和下载

元素定位及其他操作 0.常见的识别元素的方法是什么? driver.find_element_by_id() driver.find_element_by_name() driver.find_element_by_class_name() driver.find_element_by_tag_name() driver.find_element_by_link_text() driver.find_element_by_partial_link_text() driver.find_eleme

layer实现关闭弹出层刷新父界面功能详解

本文实例讲述了layer实现关闭弹出层刷新父界面功能.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 方案一: 在layer弹出层中调用父界面重新加载函数 window.parent.location.reload(); var index = parent.layer.getFrameIndex(window.name); parent.layer.close(in

点击弹框以外的的地方关闭弹框

热门专题