1

popupbox
$(".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

これはうまくいくようです：

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

ダイアログ自体内でクリックをキャッチするが、他のクリックはdocument(「1 回限りの」イベント ハンドラーを使用して) にフォールスルーし、ダイアログを閉じるという考え方です。

http://jsfiddle.net/alnitak/RJ7nt/を参照してください

于 2012-09-18T12:44:06.083 に答える
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 に答える
0

@ すべて、あなたの努力に感謝します、あなたたちは素晴らしいです..私はたくさんのことを学びました

作業コードはこちら: http://pastebin.com/7CvWWqC9

于 2012-09-19T05:59:27.880 に答える
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 に答える