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 外部事件插件

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

忘记使用另一个插件：

以下是单击外部弹出窗口时关闭 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');
                        }
                       }
                      );

非模态对话框方法二：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 外部事件插件

让你做：

$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

我必须做两部分。首先是外部点击处理程序：

$(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类，因此如果单击不是源自一个对话框，则会关闭所有对话框。它也适用于模式对话框，因为覆盖不是.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

这个问题有点老了，但如果有人想在用户单击某处时关闭非模态对话框，您可以使用我从 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');
                        }            
                    });
                }                    
            });
于 2012-06-11T22:36:16.517 回答
5

您可以在不使用任何额外插件的情况下做到这一点

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

这里 $dialog 是对话框。我们所做的基本上是在打开此对话框时获取最后一个覆盖小部件，并将单击处理程序绑定到该覆盖以关闭 $dialog，就像单击覆盖一样。

于 2013-06-07T15:13:03.403 回答
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 回答
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”的对话框，我需要一个关闭任何对话框的解决方案：

$.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 回答
2

这是对我的 NON-MODAL 对话框有效的唯一方法

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

所有功劳都归于 Axle
点击非模态对话框外的关闭

于 2017-03-16T15:46:17.533 回答
1

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

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

洛朗

于 2013-09-09T13:03:12.463 回答
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 回答
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 回答
0

这很简单，实际上你不需要任何插件，只需要 jquery 或者你可以使用简单的 javascript 来完成。

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

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

尝试

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

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

于 2015-04-30T09:58:41.540 回答
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

我最终使用了这段代码，它应该适用于页面上的任何打开的对话框，忽略工具提示上的点击，并清理正在关闭的对话框的资源。


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

            }
        });
于 2020-07-07T20:49:17.537 回答
0

我刚刚遇到了通过元素外点击关闭 .dialog(s) 的需求。我有一个包含很多信息对话框的页面，所以我需要一些东西来处理它们。我是这样处理的：

$(document).ready(function () {    
    $(window).click(function (e) {
        $(".dialogGroup").each(function () {
            $(this).dialog('close');
        })
    });
    $("#lostEffClick").click(function () {
        event.stopPropagation();
        $("#lostEffDialog").dialog("open");
    };
});
于 2020-09-23T17:04:32.093 回答