117

特定の要素がクリックされたときに表示される jQuery UI ダイアログがあります。それらのトリガー要素またはダイアログ自体以外の場所でクリックが発生した場合、ダイアログを閉じたいと思います。

ダイアログを開くコードは次のとおりです。

$(document).ready(function() {
    var $field_hint = $('<div></div>')
        .dialog({
            autoOpen: false,
            minHeight: 50,
            resizable: false,
            width: 375
        });

    $('.hint').click(function() {
        var $hint = $(this);
        $field_hint.html($hint.html());
        $field_hint.dialog('option', 'position', [162, $hint.offset().top + 25]);
        $field_hint.dialog('option', 'title', $hint.siblings('label').html());
        $field_hint.dialog('open');
    });
    /*$(document).click(function() {
        $field_hint.dialog('close');
    });*/
});

最後の部分のコメントを外すと、ダイアログが開きません。ダイアログを開くのと同じクリックが再び閉じているためだと思います。

最終作業コード
注: これはjQuery outside eventsプラグインを使用しています

$(document).ready(function() {
    // dialog element to .hint
    var $field_hint = $('<div></div>')
            .dialog({
                autoOpen: false,
                minHeight: 0,
                resizable: false,
                width: 376
            })
            .bind('clickoutside', function(e) {
                $target = $(e.target);
                if (!$target.filter('.hint').length
                        && !$target.filter('.hintclickicon').length) {
                    $field_hint.dialog('close');
                }
            });

    // attach dialog element to .hint elements
    $('.hint').click(function() {
        var $hint = $(this);
        $field_hint.html('<div style="max-height: 300px;">' + $hint.html() + '</div>');
        $field_hint.dialog('option', 'position', [$hint.offset().left - 384, $hint.offset().top + 24 - $(document).scrollTop()]);
        $field_hint.dialog('option', 'title', $hint.siblings('label').html());
        $field_hint.dialog('open');
    });

    // trigger .hint dialog with an anchor tag referencing the form element
    $('.hintclickicon').click(function(e) {
        e.preventDefault();
        $($(this).get(0).hash + ' .hint').trigger('click');
    });
});
4

21 に答える 21

166

長い間これをドラッグして申し訳ありませんが、以下を使用しました。欠点はありますか？開く機能を参照してください...

$("#popup").dialog(
{
    height: 670,
    width: 680,
    modal: true,
    autoOpen: false,
    close: function(event, ui) { $('#wrap').show(); },
    open: function(event, ui) 
    { 
        $('.ui-widget-overlay').bind('click', function()
        { 
            $("#popup").dialog('close'); 
        }); 
    }
});
于 2010-12-01T15:02:37.313 に答える
81

別のプラグインの使用を忘れる:

popin の外側をクリックしたときに 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: 方法 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;
          }


  });
于 2012-06-12T19:42:28.203 に答える
32

jQuery Outside Events プラグインをチェックしてください

次のことができます。

$field_hint.bind('clickoutside',function(){
    $field_hint.dialog('close');
});
于 2010-03-31T16:45:34.120 に答える
17

このグローバル スクリプトを追加するだけで、モーダル ダイアログの外側をクリックするだけですべてのモーダル ダイアログが閉じます。

$(document).ready(function()
{
    $(document.body).on("click", ".ui-widget-overlay", function()
    {
        $.each($(".ui-dialog"), function()
        {
            var $dialog;
            $dialog = $(this).children(".ui-dialog-content");
            if($dialog.dialog("option", "modal"))
            {
                $dialog.dialog("close");
            }
        });
    });;
});
于 2012-08-24T07:02:49.677 に答える
12 
$(".ui-widget-overlay").click (function () {
    $("#dialog-id").dialog( "close" );
});

上記のコードの動作を示すフィドル。

于 2010-06-16T15:13:25.180 に答える
8

私は2つの部分をしなければなりませんでした。まず外側のクリック ハンドラ:

$(document).on('click', function(e){
    if ($(".ui-dialog").length) {
        if (!$(e.target).parents().filter('.ui-dialog').length) {
            $('.ui-dialog-content').dialog('close');
        }
    }
});

これはdialog('close')ジェネリックui-dialog-contentクラスを呼び出すため、クリックが 1 つのダイアログ以外で発生した場合は、すべてのダイアログを閉じます。オーバーレイはボックスの一部ではないため、モーダル ダイアログでも機能し.ui-dialogます。

問題は：

  1. ほとんどのダイアログは、ダイアログの外側をクリックしたために作成されます
  2. このハンドラーは、これらのクリックによってダイアログが作成され、ドキュメントにバブリングされた後に実行されるため、すぐにそれらを閉じます。

これを修正するには、これらのクリック ハンドラーに stopPropagation を追加する必要がありました。

moreLink.on('click', function (e) {
    listBox.dialog();
    e.stopPropagation(); //Don't trigger the outside click handler
});
于 2011-12-09T15:36:06.780 に答える
5

外部イベントプラグインは必要ありません...

.ui-widget-overlay div にイベント ハンドラーを追加するだけです。

jQuery(document).on('click', 'body > .ui-widget-overlay', function(){
     jQuery("#ui-dialog-selector-goes-here").dialog("close");
     return false;
});

jQuery uiダイアログに使用したセレクターが、それを閉じるためにも呼び出されることを確認してください..つまり、#ui-dialog-selector-goes-here

于 2013-08-20T17:56:46.217 に答える
5

この質問は少し古いですが、ユーザーがどこかをクリックしたときにモーダルではないダイアログを閉じたい場合は、 JQuery UI Multiselect pluginから取得したこれを使用できます。主な利点は、クリックが「失われる」ことがないことです (ユーザーがリンクまたはボタンをクリックしたい場合は、アクションが実行されます)。

$myselector.dialog({
            title: "Dialog that closes when user clicks outside",
            modal:false,
            close: function(){
                        $(document).off('mousedown.mydialog');
                    },
            open: function(event, ui) { 
                    var $dialog = $(this).dialog('widget');
                    $(document).on('mousedown.mydialog', function(e) {
                        // Close when user clicks elsewhere
                        if($dialog.dialog('isOpen') && !$.contains($myselector.dialog('widget')[0], e.target)){
                            $myselector.dialog('close');
                        }            
                    });
                }                    
            });
于 2012-06-11T22:36:16.517 に答える
3

これは jQuery UI を使用していませんが、jQuery を使用しており、何らかの理由で jQuery UI を使用していない人に役立つ場合があります。次のようにします。

function showDialog(){
  $('#dialog').show();
  $('*').on('click',function(e){
    $('#zoomer').hide();
  });
}

$(document).ready(function(){

  showDialog();    

});

そのため、ダイアログを表示したら、最初のクリックのみを検索するクリック ハンドラーを追加します。

さて、#dialog とその内容のクリックを無視できるようにできればもっといいのですが、 $('*') を $(':not("#dialog,#dialog *") に切り替えようとすると')、それでも #dialog クリックが検出されました。

とにかく、私はこれを純粋に写真のライトボックスに使用していたので、その目的には問題なく機能しました.

于 2011-10-31T02:29:28.050 に答える
2

与えられた例では、ID '#dialog' を持つ 1 つのダイアログを使用しています。ダイアログを閉じるソリューションが必要でした:

$.extend($.ui.dialog.prototype.options, {
    modal: true,
    open: function(object) {
        jQuery('.ui-widget-overlay').bind('click', function() {              
            var id = jQuery(object.target).attr('id');
            jQuery('#'+id).dialog('close');
        })
    }
});

プロトタイプの使用を提案してくれた同僚の Youri Arkesteijn に感謝します。

于 2013-09-01T08:11:45.467 に答える
1

1つのページでプレビューモーダルを作成しているときに同じ問題が発生しました。多くのグーグル検索の後、この非常に便利なソリューションを見つけました。イベントとターゲットを使用して、クリックが発生した場所をチェックし、それに応じてアクションをトリガーするか、何もしません。

コード スニペット ライブラリ サイト

$('#modal-background').mousedown(function(e) {
var clicked = $(e.target);  
if (clicked.is('#modal-content') || clicked.parents().is('#modal-content')) 
    return; 
} else {  
 $('#modal-background').hide();
}
});
于 2016-06-21T10:02:51.383 に答える
1

ここに投稿されたソリューションに基づいて、このソリューションを使用します。

var g_divOpenDialog = null;
function _openDlg(l_d) {

  // http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside
  jQuery('body').bind(
   'click',
   function(e){
    if(
      g_divOpenDialog!=null 
      && !jQuery(e.target).is('.ui-dialog, a')
      && !jQuery(e.target).closest('.ui-dialog').length
    ){
      _closeDlg();
    }
   }
  );

  setTimeout(function() {
    g_divOpenDialog = l_d;
    g_divOpenDialog.dialog();
  }, 500);
}
function _closeDlg() {
  jQuery('body').unbind('click');
  g_divOpenDialog.dialog('close');
  g_divOpenDialog.dialog('destroy');
  g_divOpenDialog = null;
}
于 2014-09-03T15:08:07.087 に答える
0

次のコードを使用すると、ダイアログの「閉じる」ボタンのクリックをシミュレートできます(独自のダイアログの名前の文字列「MY_DIALOG」を変更します)。

$("div[aria-labelledby='ui-dialog-title-MY_DIALOG'] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();
于 2015-05-21T07:57:12.147 に答える
0

スマートコード: すべてが明確で読みやすいままになるように、次のコードを使用しています。out side body はダイアログボックスを閉じます。

$(document).ready(function () {
   $('body').on('click', '.ui-widget-overlay', closeDialogBox);
});

function closeDialogBox() {
    $('#dialog-message').dialog('close');
}
于 2018-09-07T07:58:43.747 に答える
0

簡単です。実際には、プラグインは必要ありません。jquery だけか、単純な JavaScript で実行できます。

$('#dialog').on('click', function(e){
  e.stopPropagation();
});
$(document.body).on('click', function(e){
  master.hide();
});
于 2015-02-24T21:20:23.520 に答える