1

如果我单击弹出框
$(".popup").dialog({

<!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>

单击按钮打开一个弹出窗口，当我们在弹出窗口之外单击时，我想隐藏弹出窗口，这怎么可能？

4

5 回答 5

0

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

于 2012-09-18T12:38:25.807 回答
0

例如看这个：

$(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/

于 2012-09-18T12:41:35.417 回答
0

这似乎有效：

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/

于 2012-09-18T12:44:06.083 回答
0

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

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

于 2012-09-19T05:59:27.880 回答
0

给你：jsFiddle 示例

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");
        }
    });
});
于 2012-09-18T12:46:33.420 回答