logo标签列表

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

javascriptjqueryjquery-uijquery-ui-dialog
122
当特定元素被点击时，我有一个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');
    });
});
21个回答
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建议使用原型。
2

这是我用于非模态对话框的唯一有效方法。

$(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
点击非模态对话框外部以关闭
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();
}
});
1
我使用了基于此处发布的一个解决方案：

var g_divOpenDialog = null;
function _openDlg(l_d) {

  // https://dev59.com/t3E85IYBdhLWcg3w436o
  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;
}
1
0
使用以下代码，你可以模拟点击对话框的“关闭”按钮 （请将字符串'MY_DIALOG'更改为你自己对话框的名称）。
$("div[aria-labelledby='ui-dialog-title-MY_DIALOG'] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();
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');
        });
    }
});

你确实是从所属的对话框实例中获取覆盖层，这样做永远不会出错。

这是用于模态对话框吗？我的操作与非模态有关，因此没有覆盖层。 - Sonny
0

智能代码： 我使用以下代码，以便所有内容保持清晰和可读。 在body外部将关闭对话框。

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

function closeDialogBox() {
    $('#dialog-message').dialog('close');
}
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();

            }
        });
0

其实很简单，您不需要任何插件，只需使用jQuery或者简单的JavaScript即可。

$('#dialog').on('click', function(e){
  e.stopPropagation();
});
$(document.body).on('click', function(e){
  master.hide();
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接