开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery点击弹窗外消失

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。点击弹窗外消失通常涉及到事件绑定和元素显示/隐藏的操作。

相关优势

简化代码：jQuery 提供了简洁的语法来处理常见的 DOM 操作和事件处理。
跨浏览器兼容性：jQuery 内部处理了许多浏览器之间的差异，使得开发者无需担心兼容性问题。
丰富的插件生态：有大量的第三方插件可供使用，扩展了 jQuery 的功能。

类型与应用场景

类型：这是一个典型的事件处理和 DOM 操作场景。
应用场景：常见于用户交互界面，如弹窗提示、菜单展开/收起等。

示例代码

以下是一个简单的示例，展示了如何使用 jQuery 实现点击按钮弹出窗口，并在点击窗口外部时使其消失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 弹窗示例</title>
    <style>
        #popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="openPopup">打开弹窗</button>
    <div id="popup">
        <p>这是一个弹窗</p>
    </div>

    <script>
        $(document).ready(function() {
            $('#openPopup').click(function() {
                $('#popup').show();
            });

            $(document).click(function(event) {
                if (!$(event.target).closest('#popup').length && !$(event.target).is('#openPopup')) {
                    $('#popup').hide();
                }
            });

            $('#popup').click(function(event) {
                event.stopPropagation();
            });
        });
    </script>
</body>
</html>

解释与问题解决

打开弹窗：通过点击按钮（#openPopup），调用 .show() 方法显示弹窗。
关闭弹窗：监听整个文档的点击事件，如果点击的目标不是弹窗内部元素且不是打开按钮，则调用 .hide() 方法隐藏弹窗。
阻止事件冒泡：在弹窗内部点击时，使用 .stopPropagation() 阻止事件冒泡到文档，避免误关闭弹窗。

可能遇到的问题及解决方法

弹窗无法显示：
- 确保 jQuery 库正确加载。
- 检查 CSS 样式是否正确设置，特别是 display: none; 初始状态。

点击弹窗内部也关闭弹窗：
- 使用 .stopPropagation() 阻止事件冒泡。
弹窗闪烁或显示异常：
- 确保没有其他 JavaScript 错误干扰。
- 检查 CSS 动画或过渡效果是否有冲突。

通过以上步骤和代码示例，可以有效实现点击按钮弹出窗口并在点击外部时消失的功能。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

AlertDialog点击确定不消失

} }) .show(); 但这样我们点击确定按钮的时候...AlertDialog会默认消失掉。...但如果我们在弹窗里添加一个EditText输入框，判断如果输入框为空的时候弹提示而告诉用户输入框为空，请输入内容。这种情况就需要保留AlertDialog让它不消失。...当我们在自己定义的监听里需要让AlertDialog消失时，调用alertdialog.cancle()即可整体代码如下 //创建输入框 EditText et...show(); return; } else { //让AlertDialog消失

2.9K3 0

jQuery点击返回顶部

backtop').fadeIn(500); }else{ $('.backtop').fadeOut(500); } }) }) //为返回顶部元素添加点击事件

6.1K4 0

jQuery点击click()事件

这是一个段落。

<button onclick="active()">切换</button> <script> $(document).ready...

9.9K2 0

jQuery点击图片开启，再次点击图片关闭效果

要求：jQuery点击图片开启，再次点击图片关闭效果 2：获取选中的图片的状态并以整型的格式传给后端 3：获取并且渲染传给数据库的图片状态 jquery.../3.4.1/jquery.min.js"> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/

7.7K5 0

android之AlertDialog 点击其它区域自己主动消失

遇到一个问题记录下来，在开发中使用了AlertDialog，想点击屏幕其它区域的时候让这个dialog消失，一開始不做不论什么设置，在小米手机能够正常显示，可是在三星中却有问题。

4674 0

jQuery点击图片来回切换功能

在项目里，有时候会写这样的开关效果，点击开关来回切换，也就是jquery实现点击图片切换为另一图片,再次点击恢复到原图片。下面是一个小的demo示例： jquery.com.../jquery-1.8.0.min.js"> <img class="imgclick...所以换个demo 实现一下jQuery点击图片来回切换功能点击切换回第一张图片时，就会不生效 })

9.4K2 0

JQuery各种点击事件的区别

在工作中，经常用到js的点击事件，有好多种表现形式，今天抽空总结一下它们的区别与联系。废话不多说，开始写测试案例。首先声明，本人水平有限，如果有错误之处，还请指正。...一、.点击事件，用到的有 1:$(".J_edit_save").on('click',function(e){}; 2:$('#J_new').click(function(e){}); 3:$('...DOCTYPE html> jquery/1.10.2/jquery.min.js... hideOrShow click me 静态点击事件...DOCTYPE html> jquery/1.10.2/jquery.min.js

2.9K4 0

jQuery实现点击开关图片切换

原型大概是这样的 image 需求：点击右侧的蓝色眼睛，会变成关键代码： /* 实现图片切换 */ $(".imgclick").toggle(function(){ $(this).attr("... jquery.com.../jquery-1.8.0.min.js"> <img class="imgclick

9.1K3 0

jquery 默认隐藏div,点击按钮显示，再次点击隐藏

html 代码： 22222222 jquery 代码

8.9K3 0

jquery 实现点击图片居住放大缩小

该功能是基于jquery实现的，所以第一步则是引入jquery jquery下载地址：https://jquery.com/download/ 或者使用此时调试的版本（3版本） /*!...jQuery v3.2.1 | (c) JS Foundation and other contributors | jquery.org/license */ !...$=Wb),b&&a.jQuery===r&&(a.jQuery=Vb),r},b||(a.jQuery=a....$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.goal_img }); $(outerdiv).click(function(){//再次点击淡出消失弹出层...$(this).fadeOut("fast"); }); } 通过以上简单的基本即可实现jquery 实现点击图片居住放大缩小。

17.3K2 0

bootstrap table点击修改按钮给弹框赋值

cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css"> jquery.../2.1.1/jquery.min.js"> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js

1.2K1 0

(简易)测试数据构造平台: 19 (工具申请功能)

【本节目标】打通工具申请功能，实现工单自动新增工具申请功能，即在前端页面上点击弹层确定的时候，发出请求给后台自己的函数，这个函数再去调用新建工单函数而已。...我们现在的这个确定按钮，并没有效果，需要手动加上，代码如下：上图中，我们把确定按钮的点击事件变成了某个函数：add_tool 然后自然就需要再这个函数中写这个相关的功能了~ 功能包括，发送一个post...请求给后台，并且在请求返回后关闭当前弹层,并且出现一个缓慢消失的提示框 "小饭已经帮您新建申请工具的工单了~请小主耐性等待主程大大的回复~"。...url是/add_tool/ 请求参数只有俩个，是我们data当中的form变量的俩个值，这俩个值和弹层中用户输入的那俩个输入框是绑定的，所以不用考虑不同。...返回结果中，除了关闭当前弹窗外，还展示了一条消息提示： this.$message('这是一条消息提示'); 好了，如果没有意外的话，前端这边就先这样了。

4252 0

jQuery 点击按钮打印指定文本内容

JavaScript 调用浏览器打印快递单功能时所遇到的一些坑，总结了一下，分享给大家先大概说下需求，表格里的每一行存储一张订单信息，包括购买的商品、商家信息、联系人信息等等，勾选需要打印的订单，点击打印按钮...下的一个回答，让我得到了答案我们将打印的部分即快递单模板放到一个 ID 为printableArea的div中，并添加一个onclick点击事件，大家也可以尝试下其他的办法，这里只是提供了一种解决方案...EAN8、EAN13、EAN128 等编码方式，大家可根据使用环境的不同，以及条形码数字的个数，来选择相应的编码方式，我们在这里使用的是 Code128 编码方式条形码及二维码的生成都需要引入指定的jquery-barcode...www.ijquery.cn/js/qrcode/utf.js"> jquery.qrcode-zh.js...var carrier = orderId.carrier_info; //订单编号 // 判断字段是否为空 if(jQuery.isEmptyObject

4.1K2 0

bootstrap table点击修改按钮给弹框赋值

cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css"> jquery.../2.1.1/jquery.min.js"> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js

1.8K5 1

Android点击button弹出ProgressDialog，响应结束后ProgressDialog消失

使用背景：项目中需要使用几个机器学习模型，由于加载很缓慢，所以考虑用ProgressDialog来进行提示，预测结束后dialog自动消失。 ...1.声明Handler和ProgressDialog public ProgressDialog progressDialog; public Handler handler = null; 2.点击事件...progressDialog.show(); }); 其中： runOnUiThread(() -> createList()); createList()方法完成后ProgressDialog消失

1.1K1 0

Android 设置Dialog点击返回键及屏幕不消失

dialog.dismiss(); } }); noticeDialog = builder.create(); //设置点击屏幕不消失...noticeDialog.setCanceledOnTouchOutside(false); //设置点击返回键不消失

1.9K2 0

jquery - 页面弹框 - 阻止事件冒泡示例

需求编写一个简单的页面弹框的示例，功能要求如下：一个点击按钮，点击可以弹出一个弹框弹框固定出现在页面的中间位置需要写一个背景mask，用于遮掩背景，设置透明度0.3 点击弹框外的位置，弹框就可以消失不见...，可以使用fadeOut() 点击弹框内的文本框可以输入内容，弹框不会消失不见点击弹框右上角的 × 号，则关闭弹框看完了需求，首先快速写好一波html + css 编写基本html + css ?...好了，这里已经实现了点击显示的操作了，那么下一步要编写点击弹框的其他部分，则弹框隐藏。编写点击弹框外部，则隐藏 ?...但是，此时点击弹框内也是会让弹框消失的，那如果我要填写弹框的input框来写内容，还没写就消失了，这该怎么办呢？...最后，编写弹框右上角的× 号，点击则隐藏弹框因为现在点击弹框都不会隐藏，所以可以单独给#close写一个click()方法，设置触发fadeOut()事件。 ?

3.3K1 0

jquery实现点击某元素之外触发事件

(e.target).closest("#menu").length == 0 && $(e.target).closest("#open").length == 0){ //点击

2.8K2 0

jquery点击事件多次执行解决方法

上一篇文章介绍中使用a的弹窗方式测试孔href属性,但是最近在一个项目中发现click事件执行后会多次触发.应该是点击事件进行叠加了,jquery的unbind()可以解决此问题.

1.7K3 0

JS-jquery 获取当前点击的对象

charset="utf-8"> 获取当前点击对象...title> /*传入参数this即可获取当前点击的对象...console.log(data.id); alert(data.innerText); } 点击事件里传参数

8.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭