文章/答案/技术大牛

发布

jquery 点击空白关闭

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，可以更方便地实现复杂的 JavaScript 功能。

类型

jQuery 的事件处理主要分为以下几种类型：

鼠标事件：如 click、mouseover、mouseout 等。
键盘事件：如 keydown、keyup、keypress 等。
表单事件：如 submit、change、focus、blur 等。
文档/窗口事件：如 load、unload、resize、scroll 等。

应用场景

jQuery 点击空白关闭的应用场景非常广泛，常见于弹出窗口、模态框、提示框等需要用户交互的场景。

示例代码

以下是一个使用 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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        #modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <button id="openModal">打开模态框</button>
    <div id="overlay"></div>
    <div id="modal">
        <p>这是一个模态框</p>
        <button id="closeModal">关闭模态框</button>
    </div>

    <script>
        $(document).ready(function() {
            $('#openModal').click(function() {
                $('#overlay, #modal').show();
            });

            $('#closeModal').click(function() {
                $('#overlay, #modal').hide();
            });

            $(document).on('click', function(event) {
                if (!$(event.target).closest('#modal').length && !$(event.target).is('#openModal')) {
                    $('#overlay, #modal').hide();
                }
            });
        });
    </script>
</body>
</html>

问题及解决方法

问题：点击空白区域无法关闭模态框

原因：

事件绑定问题：可能没有正确绑定点击事件。
选择器问题：可能使用了错误的选择器，导致事件没有正确触发。
层级问题：可能模态框的层级设置不正确，导致点击事件被其他元素拦截。

解决方法：

确保在文档加载完成后绑定事件。
使用正确的选择器，确保事件绑定到正确的元素上。
确保模态框的层级设置正确，可以通过 z-index 属性调整。

通过以上方法，可以解决点击空白区域无法关闭模态框的问题。

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

有帮助

没帮助

如何创建像Google Calendar使用的弹出窗口？

javascript、jquery、css、popup、twitter-bootstrap

当你点击Google Calender中的空白区域来添加一个事件，或者当你点击一个已经放置的事件时，你会得到一个非常漂亮的弹出窗口，里面有关于这个事件的信息(请看附图)。如何使用CSS和Javascript创建类似的弹出窗口(我更喜欢jQuery)。如果有帮助的话，我也在使用Bootstrap。还要注意关闭行为(关闭按钮，如果我单击弹出窗口，它将关闭)。如果有不止一个好的答案，我会接受使用jQuery (和jQuery UI)和Boo

浏览 0提问于2012-03-24得票数 2

回答已采纳

1回答

JQuery点击/关闭

jquery

我想要一些短而简单的东西，比如在下面的悬停/关闭功能：$( "td" ).hover( $( this ).addClass( "hover" ); $( this ).removeClass( "hover" ););写一个简单的点击/关闭函数最有效的方法是什么？

浏览 2提问于2014-12-10得票数 0

回答已采纳

2回答

jquery关闭点击

jquery、jquery-ui

当我单击“关闭”时，我将创建jQuery UI daialog (如果显示它)。我的问题:当我单击out时，是否存在对话框关闭它的任何方法或选项？？

浏览 3提问于2013-02-18得票数 0

回答已采纳

1回答

Rails 4上的jQuery Mobile返回空白页

jquery-mobile、ruby-on-rails-4.1

出于某种原因，当我在浏览器上使用“后退/转发”按钮时，jQuery移动有时会返回空白页。URL访问浏览器，因此我知道AJAX是禁用的。按浏览器上的“刷新”正确加载页面。我在jQuery 1.4.5上使用 Rails 4.1.7。

浏览 2提问于2014-12-17得票数 0

回答已采纳

1回答

Worklight:在转弯屏幕空白中单击超级链接

iphone、jquery-mobile、user-interface、ibm-mobilefirst、hybrid

我在JQuery页面上有一个简单的文本和里面的超级链接，所以当我点击超级链接时，它确实会打开外部浏览器，但作为回报，它会使应用程序屏幕变白！(空白)，然后我必须关闭应用程序并重新启动。我使用的是Worklight，JQuery手机和iPhone上的测试。我没有使用WL.App.openURL或window.open，它只是一个来自数据库的文本与超链接，在页面上，我把一个分区。

浏览 2提问于2013-06-11得票数 0

回答已采纳

2回答

Jquery关闭点击功能？

javascript、jquery

这可能听起来像是一个愚蠢的问题，但是有没有什么我可以调用的例子的offclick事件，我目前有这个； $("#navLeft").show();我想在用户单击单选按钮后隐藏#navLeft内容？

浏览 0提问于2013-03-28得票数 6

回答已采纳

2回答

jQuery分离div，附加div

jquery、video、append、detach

在Chrome/Safari中，一旦关闭了lightbox，Vimeo视频就会继续在后台播放。此时，“分离”按钮将停止视频，但当您关闭lightbox并单击菜单项以重新打开视频时，视频div为空白。网站功能:点击"a“、"b”、"c“，出现视频灯箱。单击lightbox中的"X“，lightbox内容将关闭。div that holds the Vimeo iframe .abc-align-right <---- the "X&q

浏览 0提问于2012-03-03得票数 0

回答已采纳

4回答

点击Jquery关闭div

javascript、jquery

在我的代码中，我试图在我的<iframe>或<script>标签中放置一个广告，当用户点击DIV时，它会自动删除包含广告的DIV。$('.custom_ads_placement').remove();}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></

浏览 1提问于2017-10-11得票数 0

回答已采纳

3回答

jquery点击关闭功能

jquery、click、jquery-animate

我正在尝试创建一个搜索栏，一旦点击就会展开。当用户在其他地方单击时，搜索栏将返回到其正常状态。我没有做到这一点，但我已经让它在点击时展开。

浏览 0提问于2013-01-16得票数 2

回答已采纳

1回答

点击Jquery关闭弹出

javascript、jquery

我用这个jquery显示我的弹出窗口，$(document).ready(function () { $("#ResetPasswordModal").modal({ });}); 我使用这个jquery在单击时将新输入的密码传递给控制器操作，一旦单击保存按钮，我希望弹

浏览 2提问于2015-04-30得票数 3

1回答

jQuery脚本不断地从我正在编辑的页面中重定向我

javascript、jquery、sharepoint-online

(我无法让按钮只重定向到我想点击的页面，所以我尝试这样做。)我使用jQuery / JavaScript脚本来完成这个任务。Redirect(); $(document).load("url");</script> 我现在的问题是，每当该页加载时，它只加载一个空白页但我无法进入编辑屏幕，因为它立即将我重定向到一个空白页。我试着在Google中关闭JavaScript，但是即使我能够

浏览 2提问于2018-03-27得票数 2

回答已采纳

1回答

Get Jquery选项显示在Jquery对话框的外部。

javascript、jquery、css

我在底部的jquery对话框中选择了'Jquery‘。当我打开“Chosen”时，“”将进入jquery对话框。这会导致jquery对话框获得垂直滚动条，并且在关闭“已选择”后，dialog.How中出现空白间隙。关闭“已选择”后，是否可以删除该间隙。或者，是否有任何方法可以在对话框之外获得“选定的选项”。

浏览 4提问于2014-11-29得票数 0

1回答

为什么我看不到在水晶报告中抑制嵌入字段空白线的选项？

crystal-reports-2010

为了消除我在“帮助”中看到的空白行，以及在互联网上看到的所有这些步骤。右击感兴趣的字段并选择Format对象。

浏览 1提问于2012-08-31得票数 0

回答已采纳

3回答

如何在锚点单击时添加类和移除类

jquery、html、css

我正在实现主题，这是用户可以选择一个主题与点击，所以当我点击设置图标，它是完美运行，它正在打开，但当我再次点击它不是关闭与jQuery 3.4.1。下面是我的jquery3.4.1代码 $(".theme-button").click(function(){ });我还想用javascript 这是

浏览 2提问于2020-03-20得票数 1

1回答

将UTF-16 csv文件转换为UTF-8 csv文件在python中工作，但在excel中不起作用。

python-3.x、excel、csv

￥2999', '3.39', '3.2', '3.38', '56', '34.9861751483108', '135.761313932311'] 在Excel中，第二个记录是(日本人都错了)：(点击查看更大

浏览 9提问于2022-08-08得票数 0

4回答

jQuery切换，关闭链接未交换切换状态

jquery

你好，所以我有以下信息： jQuery('#event_time_interval_form_part').fadeIn(); jQuery('#event_time_interval_form_part').fadeOut();jQuery('.cancel').click(function(e){ e.p

浏览 1提问于2013-05-29得票数 1

回答已采纳

1回答

Jquery在点击中关闭

javascript、jquery

我有一个问题的脚本，我在网上下载它，基本上我需要的是一个常见问题与折叠面板互动，但在这种情况下，在另一个不同的情况下，我想当我点击一个问题它打开，而当我点击另一个问题之前的问题关闭，并打开我点击的问题。我找到了这个它运行良好，但缺少一个细节，如果我点击相同的链接(问题)，问题不会折叠回正常正常模式，这是唯一可能关闭他选择另一个链接。当我选择另一个问题并再次单击同一问题时，我希望能够关闭该问题。

浏览 0提问于2012-06-20得票数 0

1回答

手风琴可以在移动设备上关闭所有部分，但在平板电脑和台式机上始终打开一个手风琴部分

javascript、jquery、html、css

在桌面/平板电脑屏幕尺寸上，需要始终有一个打开的部分，这样才不会有空白区域。但在移动设备上，这个相同的手风琴需要关闭所有部分的能力(即，如果你点击一个已经打开的部分，它将关闭，其他部分将不会打开)。这是我目前使用的jQuery： var thisClicked = $(this); if (width <= 767) {

浏览 0提问于2016-06-25得票数 0

1回答