Question

如果我点击弹出框外的任何地方，我想关闭弹出框的 $（ “弹出”）。对话框（{

<!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">
<head runat="server">
    <title></title>
    <link href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".popup").dialog({
                autoOpen: false,
                draggable: true,
                title: "Add New Person",
                open: function (type, data) {
                    $(this).parent().appendTo("form");
                }
            });
            $("#body1")
              .bind(
               'click',
               function (e) {
                if (
             jQuery('.popup').dialog('isOpen')
             && !jQuery(e.target).is('.ui-dialog, a')
             && !jQuery(e.target).closest('.ui-dialog').length
            ) {
                    jQuery('.popup').dialog('close');
                }
               }
              );
        });
        function showDialog(id) {
            $('#' + id).dialog("open");
        }
        function closeDialog(id) {
            $('#' + id).dialog("close");
        }
    </script>
</head>
<body id="body1">
    <input type="button" onclick="showDialog('pop101');" value="Popup1" />
    <input type="button" onclick="showDialog('pop102');" value="Popup2" />
    <input type="button" onclick="showDialog('pop103');" value="Popup3" />
    <div style="background: green" id='pop101' class="popup">
    </div>
    <div style="background: orange" id='pop102' class="popup">
    </div>
    <div style="background: blue" id='pop103' class="popup">
    </div>
</body>
</html>

点击按钮打开一个弹出窗口，当我们点击弹出窗口外，我想要弹出窗口隐藏，怎么可能？

Answer 1

您应该能够使用$(document).click(function(e) { });检测单击文档中的任何位置 - 保留标志/布尔值以指示当前弹出状态（如果有必要） - （不检查您的标记，这在过去有效，但可能不适用于您的情况/结构）或者您可以创建一个“覆盖”，它位于您网站的所有元素上，禁止位于顶部的对话框，然后检测该背景元素的点击。

Answer 2

例如看看这个：

$(document).ready(function ()
{
    $(".popup").dialog({
        autoOpen: false,
        draggable: true,
        title: "Add New Person",
        open: function (type, data) {
            $(this).parent().appendTo("#container");
        }
    });
    $('[data-popup^="pop"]').click(function(e){
        close(); //close all opened dialogs
        e.stopPropagation(); // stop body1 click
        $('#' + $(this).data('popup')).dialog("open");
    });

    var close = function()
    {
        $('.ui-dialog:visible').find('.popup').dialog('close');
    };

    $('#body1').click(close);
});

演示：jsfiddle.net/pXszH/2/

Answer 3

这似乎有效：

open: function() {
    var self = this;
    $(this).parent('.ui-dialog').on('click', false);
    $(document).one('click', function() {
        $(self).dialog('close');
    });
}

这个想法是你在对话框本身中捕获任何点击，但允许任何其他点击进入document（使用“一次性”事件处理程序）并关闭对话框。

请参阅http://jsfiddle.net/alnitak/RJ7nt/

Answer 4

Here you go: jsFiddle example

HTML：

<form id="popup-buttons">
    <input type="button" value="Popup1" data-popup-id="pop101"/>
    <input type="button" value="Popup2" data-popup-id="pop102"/>
    <input type="button" value="Popup3" data-popup-id="pop103"/>
</form>
<div style="background: green" id='pop101' class="popup">
</div>
<div style="background: orange" id='pop102' class="popup">
</div>
<div style="background: blue" id='pop103' class="popup">
</div>

JavaScript的：

function showDialog(id) {
    $('#' + id).dialog("open");
}
function closeDialog(id) {
    $('#' + id).dialog("close");
}    

$(document).ready(function () {
    // Handle clicks on buttons
    //$("#popup-buttons").on("click", "input", function(e) {    // for new jQuery....
    $("input[type=button]").click(function(e) {      // for old jQuery
        console.log("input click", e);
        var value = $(e.currentTarget).attr("data-popup-id");
        if (value)
            showDialog($(e.currentTarget).attr("data-popup-id"));
        else
            console.log("Error: user clicked on unexpected element");
        // Stop elements further up the DOM tree from processing this event
        e.stopPropagation();
    });

    // Handle "other" clicks
    $("html").click(function(e) {
        console.log("default click handler", e);
        $("div.popup").each(function(i,e) {
            closeDialog($(this).attr("id"));
        });
    });

    $(".popup").dialog({
        autoOpen: false,
        draggable: true,
        title: "Add New Person",
        open: function (type, data) {
            $(this).parent().appendTo("form");
        }
    });
});

Answer 5

@ all，谢谢你的努力，你们真是太棒了......我学到了很多东西

工作代码在这里：http://pastebin.com/7CvWWqC9

jquery ui对话框关闭点击任意位置

5 个答案: