jQuery UI -当点击外部时关闭对话框

I have a jQuery UI Dialog that gets displayed when specific elements are clicked. I would like to close the dialog if a click occurs anywhere other than on those triggering elements or the dialog itself.

我有一个jQuery UI对话框，在单击特定元素时显示该对话框。如果单击发生在触发元素或对话框本身之外的任何地方，我希望关闭该对话框。

Here's the code for opening the dialog:

下面是打开对话框的代码:

$(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');
    });*/
});

If I uncomment the last part, the dialog never opens. I assume it's because the same click that opens the dialog is closing it again.

如果我取消最后一部分的注释，对话框将永远不会打开。我假设是因为相同的点击打开对话框再次关闭。

---

Final Working Code
Note: This is using the jQuery outside events plugin

最后的工作代码注意:这是使用jQuery外部事件插件

$(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');
    });
});

18 个解决方案

#1

Check out the jQuery Outside Events plugin

查看jQuery外部事件插件

Lets you do:

让你做的事:

$field_hint.bind('clickoutside',function(){
    $field_hint.dialog('close');
});

#2

Sorry to drag this up after so long but I used the below. Any disadvantages? See the open function...

抱歉拖了这么久，但我用了下面的。任何缺点吗?看到打开的功能…

$("#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'); 
        }); 
    }
});

#3

Forget using another plugin:

忘记使用另一个插件:

Here are 3 methods to close a jquery UI dialog when clicking outside popin:

下面是关闭jquery UI对话框的3种方法:

If the dialog is modal/has background overlay: http://jsfiddle.net/jasonday/6FGqN/

如果对话框是modal/有后台覆盖: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');
            })
        }
    });
}); 

If dialog is non-modal Method 1: method 1: http://jsfiddle.net/jasonday/xpkFf/

如果对话框是非模态的方法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');
                        }
                       }
                      );

Non-Modal dialog Method 2: http://jsfiddle.net/jasonday/eccKr/

非模态对话框方法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;
          }


  });

#4

Just add this global script, which closes all the modal dialogs just clicking outsite them.

只需添加这个全局脚本，它将关闭所有模式对话框，只需单击它们的外站。

$(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");
            }
        });
    });;
});

#5

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

Fiddle showing the above code in action.

小提琴显示上述代码的行动。

#6

I had to do two parts. First the outside click-handler:

我必须做两部分。第一个外部单击处理程序:

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

This calls dialog('close') on the generic ui-dialog-content class, and so will close all dialogs if the click didn't originate in one. It will work with modal dialogs too, since the overlay is not part of the .ui-dialog box.

这将调用泛型ui-对话框-内容类上的对话框('close')，因此，如果单击没有发起，则将关闭所有对话框。它也可以使用模态对话框，因为覆盖不是.ui对话框的一部分。

The problem is:

现在的问题是:

1. Most dialogs are created because of clicks outside of a dialog
2. 大多数对话框都是由于在对话框之外单击而创建的
3. This handler runs after those clicks have created a dialog and bubbled up to the document, so it immediately closes them.
4. 该处理程序在这些单击创建了一个对话框并向文档冒泡之后运行，因此它会立即关闭它们。

To fix this, I had to add stopPropagation to those click handlers:

为了解决这个问题，我必须向这些单击处理程序添加stopPropagation:

moreLink.on('click', function (e) {
    listBox.dialog();
    e.stopPropagation(); //Don't trigger the outside click handler
});

#7

This question is a bit old, but in case someone wants to close a dialog that is NOT modal when user clicks somewhere, you can use this that I took from the JQuery UI Multiselect plugin. The main advantage is that the click is not "lost" (if user wants to click on a link or a button, the action is done).

这个问题有点过时了，但是如果有人想要关闭一个非模态的对话框，当用户点击某个地方时，您可以使用我从JQuery UI Multiselect插件中获得的这个对话框。主要的优点是点击没有“丢失”(如果用户想要点击链接或按钮，操作就完成了)。

$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');
                        }            
                    });
                }                    
            });

#8

You can do this without using any additional plug-in

您可以在不使用任何附加插件的情况下这样做

var $dialog= $(document.createElement("div")).appendTo(document.body);
    var dialogOverlay;

    $dialog.dialog({
        title: "Your title",
        modal: true,
        resizable: true,
        draggable: false,
        autoOpen: false,
        width: "auto",
        show: "fade",
        hide: "fade",
        open:function(){
            $dialog.dialog('widget').animate({
                width: "+=300", 
                left: "-=150"
            });

//get the last overlay in the dom
            $dialogOverlay = $(".ui-widget-overlay").last();
//remove any event handler bound to it.
            $dialogOverlay.unbind();
            $dialogOverlay.click(function(){
//close the dialog whenever the overlay is clicked.
                $dialog.dialog("close");
            });
        }
    });

Here $dialog is the dialog. What we are basically doing is to get the last overlay widget whenever this dialog is opened and binding a click handler to that overlay to close $dialog as anytime the overlay is clicked.

这是对话框。我们要做的就是在打开这个对话框时获取最后一个覆盖小部件，并将一个单击处理程序绑定到该覆盖层，以便在单击该覆盖层时关闭$对话框。

#9

no need for the outside events plugin...

不需要外部事件插件…

just add an event handler to the .ui-widget-overlay div:

只需向.ui-widget-overlay div添加一个事件处理程序:

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

just make sure that whatever selector you used for the jQuery ui dialog, is also called to close it.. i.e. #ui-dialog-selector-goes-here

只要确保jQuery ui对话框中使用的选择器也被调用来关闭它。即# ui-dialog-selector-goes-here

#10

This doesn't use jQuery UI, but does use jQuery, and may be useful for those who aren't using jQuery UI for whatever reason. Do it like so:

这不是使用jQuery UI，而是使用jQuery，对于那些出于某种原因不使用jQuery UI的人来说可能很有用。做像这样:

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

$(document).ready(function(){

  showDialog();    

});

So, once I've shown a dialog, I add a click handler that only looks for the first click on anything.

因此，一旦我显示了一个对话框，我就添加了一个单击处理程序，它只查找对任何内容的第一次单击。

Now, it would be nicer if I could get it to ignore clicks on anything on #dialog and its contents, but when I tried switching $('*') with $(':not("#dialog,#dialog *")'), it still detected #dialog clicks.

现在，如果我能让它忽略在#对话框及其内容上的任何点击，那就更好了，但是当我尝试用$(':not("#dialog，#dialog *")切换$('*')时，它仍然检测到#对话框的点击。

Anyway, I was using this purely for a photo lightbox, so it worked okay for that purpose.

不管怎样，我纯粹是把它用在一个照片灯箱上，所以它在这个目的上还行。

#11

The given example(s) use one dialog with id '#dialog', i needed a solution that close any dialog:

给定的示例使用一个带有id '#dialog'的对话框，我需要一个关闭任何对话框的解决方案:

$.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');
        })
    }
});

Thanks to my colleague Youri Arkesteijn for the suggestion of using prototype.

感谢我的同事Youri Arkesteijn关于使用prototype的建议。

#12

For those you are interested I've created a generic plugin that enables to close a dialog when clicking outside of it whether it a modal or non-modal dialog. It supports one or multiple dialogs on the same page.

对于那些你感兴趣的人，我已经创建了一个通用的插件，它可以关闭一个对话框，无论它是模态的还是非模态的。它支持同一页面上的一个或多个对话框。

More information here: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

更多信息:http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

Laurent

劳伦特

#13

I use this solution based in one posted here:

我使用这个解决方案的基础上，张贴在这里:

var g_divOpenDialog = null;
function _openDlg(l_d) {

  // http://*.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;
}

#14

I had same problem while making preview modal on one page. After a lot of googling I found this very useful solution. With event and target it is checking where click happened and depending on it triggers the action or does nothing.

我在一个页面上做预览模式时遇到了同样的问题。在搜索了很多次之后，我发现了这个非常有用的解决方案。对于事件和目标，它检查单击发生的位置，并根据它触发操作或什么都不做。

Code Snippet Library site

代码片段图书馆网站

$('#modal-background').mousedown(function(e) {
var clicked = $(e.target);  
if (clicked.is('#modal-content') || clicked.parents().is('#modal-content')) 
    return; 
} else {  
 $('#modal-background').hide();
}
});

#15

This is the only method that worked for me for my NON-MODAL dialog

这是我在非模态对话框中唯一有效的方法

$(document).mousedown(function(e) {
    var clicked = $(e.target); // get the element clicked
    if (clicked.is('#dlg') || clicked.parents().is('#dlg') || clicked.is('.ui-dialog-titlebar')) {
        return; // click happened within the dialog, do nothing here
    } else { // click was outside the dialog, so close it
        $('#dlg').dialog("close");
    }
});

All credit goes to Axle
Click outside non-modal dialog to close

所有信用证到车轴外点击非模态对话框关闭

#16

İt's simple actually you don't need any plugins, just jquery or you can do it with simple javascript.

İt其实很简单你不需要任何插件,jquery或者你可以用简单的javascript。

$('#dialog').on('click', function(e){
  e.stopPropagation();
});
$(document.body).on('click', function(e){
  master.hide();
});

#17

I don't think finding dialog stuff using $('.any-selector') from the whole DOM is so bright.

我不认为从整个DOM中使用$('.any-selector')查找对话框内容是如此光明。

Try

试一试

$('<div />').dialog({
    open: function(event, ui){
        var ins = $(this).dialog('instance');
        var overlay = ins.overlay;
        overlay.off('click').on('click', {$dialog: $(this)}, function(event){
            event.data.$dialog.dialog('close');
        });
    }
});

You're really getting the overlay from the dialog instance it belongs to, things will never go wrong this way.

你确实从它所属的对话框实例中获得了覆盖，这样事情永远不会出错。

#18

With the following code, you can simulate a click on the 'close' button of the dialog (change the string 'MY_DIALOG' for the name of your own dialog)

使用以下代码，您可以模拟单击对话框的“close”按钮(将字符串“MY_DIALOG”更改为您自己对话框的名称)

$("div[aria-labelledby='ui-dialog-title-MY_DIALOG'] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();