Jq点击其他任意地方隐藏关闭弹窗div

参考链接:https://blog.csdn.net/weixin_43233914/article/details/85133839

效果

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>点击其他地方关闭弹窗div</title><script src="./js/jquery.min.js"></script><style>.none {display: none;}.choose-box {position: absolute;top: 35px;width: 220px;height: 200px;background-color: #fff;border: 1px solid #ddd;border-radius: 5px;box-shadow: 1px 1px 1px #ddd;z-index: 2;}.choose-box input {width: 180px;padding: 5px;margin: 50px 10px 20px;}.choose-box .trangle {position: absolute;top: -6px;left: 15px;border-right: 6px solid transparent;border-bottom: 6px solid #ddd;border-left: 6px solid transparent;}.choose-box .search_btn {width: 60px;height: 35px;margin: 0 auto;line-height: 35px;text-align: center;border-radius: 10px;border: 1px solid #fff;background-image: linear-gradient(120deg, #6cbaca 0%, #2C9DA1 100%);color: rgba(255, 255, 255, 0.966);font-weight: bold;box-shadow: 1px 1px 2px gray;}</style></head><body><div class="container"><div class="show-box-btn">点击出现弹窗</div><div class="choose-box none"><div class="trangle"></div><input class="username-input" type="text" placeholder="请输入xxxx"><div class="search_btn">确 定</div></div></div><script>$(".show-box-btn").on('click', function () {$(".choose-box").toggleClass("none");})// 点击“确定”按钮关闭弹窗$(".search_btn").on('click', function () {$(".choose-box").addClass("none");})// 点击除弹窗意外的其他部分时关闭弹窗$(document).on('click', function (e) {if ($(e.target).closest('.container').length > 0) {// alert('弹出框内部被点击了');} else {// alert('弹出框以外的部分被点击了');// 关闭弹框$('.choose-box').addClass("none");// $('.choose-box').hide();}})</script></body></html>

关键代码：

表面上好像是实现了，但是好像其中还涉及到冒泡啥的我还没搞清楚。
以上代码其实点击其他地方关闭弹窗后，再点击任意地方还是会调用函数，会执行alert('弹出框以外的部分被点击了');

closest() 方法
closest() 方法返回被选元素的第一个祖先元素。就是我们从这个元素开始，进行向上遍历，直到找到我们要找的元素，遍历停止，也就是说寻找第一个祖先元素。

Jq点击其他任意地方隐藏关闭弹窗div相关推荐

点击除元素以外的任意地方隐藏元素js
比如想实现点击列表弹出筛选器,点击其他任意地方关闭筛选器,如图该筛选器class名 1 $(document).click(function () { 2 $(".subMenu" ...
HTML点击元素以外任意地方隐藏该元素
HTML点击元素以外任意地方隐藏该元素原生javascript写法: var scheduleBox = document.querySelector('#schedule-box') docume ...
jquery实现点击页面其他地方隐藏指定元素
代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> < ...
点击页面其它地方隐藏该div
当手写下拉框的时候会遇到这种问题:点击页面其它地方隐藏该div,有意见是绑定body,点击目标div时触发事件,点击其他document会出发hide事件,但是:目标div也属于body.为了解决这种 ...
bootstrap弹出框如何实现点击出弹出框后，再点击任意地方隐藏弹出框
最近做个项目是用bootstrap搭建的网站,因为其自带弹出框很好使,便直接拿过来用了. 不废话直接进入正题共分两步 1. 首先设弹出框方式为自动 popover(function(){trigge ...
jquery 点击元素以外任意地方隐藏该元素的方法
第一先实现点击任何地方都隐藏该元素(假设id="bar") $(document).click(function(){ $("#bar").hide();}); ...
android 点击屏幕其它地方隐藏输入法
只需在activity加下面代码: @Overridepublic boolean dispatchTouchEvent(MotionEvent ev) {if (ev.getAction() == ...
jq 点击LI其他LI隐藏[类似选项卡，但是不是所有隐藏而是部分隐藏]
如五个li,其中第3,4个有一个样式 xuanxiu,当点击3的时候4隐藏,但是1235是显示的 <!DOCTYPE html> <html> <head> &l ...
jQuery 怎么实现点击页面其他地方隐藏菜单？做了个按钮点击时弹出菜单，想实现点击其他地方时隐藏弹出的菜单
<p><a href="javascript:void(0)" class="a">菜单按钮</a></p> & ...

Jq点击其他任意地方隐藏关闭弹窗div

效果

代码：

Jq点击其他任意地方隐藏关闭弹窗div相关推荐

最新文章

热门文章