web-dev-qa-db-ja.com

クリック時にダイアログを閉じる（どこでも）

閉じるアイコンの代わりに画面上のどこかをクリックしてjQueryダイアログを閉じるデフォルトのオプションはありますか？

jqueryjquery-uidialogmodal-dialog
50
Fuxi

編集：これは、jQuery UIダイアログを拡張して、外部をクリックしたときに閉じる機能とその他の機能を追加したプラグインです。 https://github.com/jasonday/jQuery-UI-Dialog-extended

ポピンの外側をクリックしたときにjquery UIダイアログを閉じる3つの方法を次に示します。

ダイアログがモーダル/バックグラウンドオーバーレイの場合： http://jsfiddle.net/jasonday/6FGqN/

jQuery(document).ready(function() {
    jQuery("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 100,
        modal: true,
        open: function() {
            jQuery('.ui-widget-overlay').bind('click', function() {
                jQuery('#dialog').dialog('close');
            })
        }
    });
});

ダイアログがモーダルでない場合方法1： http://jsfiddle.net/jasonday/xpkFf/

// Close Pop-in If the user clicks anywhere else on the page
jQuery('body')
    .bind('click', function(e) {
        if(jQuery('#dialog').dialog('isOpen')
            && !jQuery(e.target).is('.ui-dialog, a')
            && !jQuery(e.target).closest('.ui-dialog').length
        ) {
            jQuery('#dialog').dialog('close');
        }
    });

非モーダルダイアログ方法2： http://jsfiddle.net/jasonday/eccKr/

$(function() {
    $('#dialog').dialog({
        autoOpen: false, 
        minHeight: 100,
        width: 342,
        draggable: true,
        resizable: false,
        modal: false,
        closeText: 'Close',
        open: function() {
            closedialog = 1;
            $(document).bind('click', overlayclickclose); },
        focus: function() { 
            closedialog = 0; },
        close: function() { 
            $(document).unbind('click'); }
    });

    $('#linkID').click(function() {
        $('#dialog').dialog('open');
        closedialog = 0;
    });

    var closedialog;

    function overlayclickclose() {
        if (closedialog) {
            $('#dialog').dialog('close');
        }
        //set to one because click on dialog box sets to zero
        closedialog = 1;
    }
});
124
Jason

JQueryダイアログウィンドウを作成するとき、JQueryはui-widget-overlayクラスを挿入します。クリック関数をそのクラスにバインドしてダイアログを閉じると、探している機能が提供されます。

コードは次のようなものになります（テストされていません）：

$('.ui-widget-overlay').click(function() { $("#dialog").dialog("close"); });

編集：以下はKendoについてもテストされています：

$('.k-overlay').click(function () {
            var popup = $("#dialogId").data("kendoWindow");
            if (popup)
                popup.close();
        });
17
jgallant

ページで開くことができる複数のダイアログがある場合、背景をクリックすることでそれらのいずれかを閉じることができます：

$('body').on('click','.ui-widget-overlay', function() {
    $('.ui-dialog').filter(function () {
    return $(this).css("display") === "block";
    }).find('.ui-dialog-content').dialog('close');
});

（モーダルダイアログでのみ機能します。 '。ui-widget-overlay'に依存します。また、いずれかの背景がクリックされるたびにダイアログを閉じますallを開きます。）

8
jackadams49

サイト全体のすべてのダイアログでこれを行いたい場合は、次のコードを試してください...

$.extend( $.ui.dialog.prototype.options, { 
    open: function() {
        var dialog = this;
        $('.ui-widget-overlay').bind('click', function() {
            $(dialog).dialog('close');
        });
    }   

});
7
DaWolf

この投稿は役に立つかもしれません：

http://www.jensbits.com/2010/06/16/jquery-modal-dialog-close-on-overlay-click/

ボックスで覆われた領域の外側をクリックしてjQuery UIモーダルダイアログを閉じる方法 使用方法に応じてoverlayクリックまたはライブイベントを適用するタイミングと方法の説明も参照してくださいページ上のダイアログ。

6
jk.

場合によっては、ジェイソンの答えはやり過ぎです。また、$('.ui-widget-overlay').click(function(){ $("#dialog").dialog("close"); });は常に動的コンテンツで機能するとは限りません。

私が見つけた解決策はすべての場合に機能します：

$('body').on('click','.ui-widget-overlay',function(){ $('#dialog').dialog('close'); });
5
neokio

前の投稿のコードが機能しない場合は、これを試してください：

$("a.ui-dialog-titlebar-close")[0].click();
1
perkas

少し遅れましたが、これは私のために働いた解決策です。モーダルがオーバーレイタグ内にある場合に最適です。そのため、モーダルコンテンツ以外の場所をクリックすると、モーダルが閉じます。

[〜＃〜] html [〜＃〜]

<div class="modal">  
  <div class="overlay">
    <div class="modal-content">
      <p>HELLO WORLD!</p>
    </div>
  </div>
</div>

[〜＃〜] js [〜＃〜]

$(document).on("click", function(event) {
  if ($(event.target).has(".modal-content").length) {
    $(".modal").hide();
  }
});

実施例

0
dragoeco

これを試して：

$(".ui-widget-overlay").click(function () {
    $(".ui-icon.ui-icon-closethick").trigger("click");
});
0
Stepan Tripal

同じ問題に直面して、モーダルダイアログでも非モーダルダイアログでも、ダイアログの外側をクリックするとダイアログを閉じることができる小さなプラグインを作成しました。同じページで1つまたは複数のダイアログをサポートします。

私のウェブサイトの詳細はこちら： http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

ローラン

0
Laurent