1

当您在对话框外部单击时，我想关闭对话框，但我不确定您如何在 jquery/plain javascript 中进行测试。

有些人建议使用 blur 事件，但这似乎不受 jquery 对话框的支持。

编辑我也有这个问题，但无法处理当前提供的任何答案，因为我无法使我的对话框成为模态。

我需要这个，以便我可以仅在对话框位于最顶部时注册键处理程序，并在另一个对话框置于顶部时立即取消注册它们。

有没有人有一个解决方案 - 理想情况下，每次其他对话框到达顶部时都会引发一个事件？

4

8 回答 8

10

纯 jQueryUI 没有模态对话框。

例子：

http://jsfiddle.net/marcosfromero/x4GXy/

代码：

// Bind the click event to window
$(window).click(function(event) {
    if (($(event.target).closest('.ui-dialog')).length>0) {
        // if clicked on a dialog, do nothing
        return false;
    } else {
        // if clicked outside the dialog, close it
        // jQuery-UI dialog adds ui-dialog-content class to the dialog element.
        // with the following selector, we are sure that any visible dialog is closed.
        $('.ui-dialog-content:visible').dialog('close');

    }
})
于 2011-05-13T02:08:26.880 回答
5

你能把你的对话框变成模态的吗？如果是这样，那么您可以（可能）通过模态叠加层上的事件来实现您所追求的......

完全hacky，未经测试的想法，但它可能只是工作......

模态对话框创建称为 click.dialog-overlay 等的事件......当鼠标在对话框外单击时，在模态覆盖层上会触发这些事件。挂钩这些事件并关闭对话框可能只是做你想做的事情......

于 2009-05-25T03:22:08.360 回答
1

blur 事件并不是您想要的。模糊事件发生在单个元素上。您正在寻找的是当用户单击“外部”特定元素组时 - 某个父节点下方的所有内容。**没有事件，因此您必须使用您有权访问的事件来模拟它.

$('.dialogSelector').dialog({
  open: function(e) { // on the open event
    // find the dialog element
    var dialogEl = $(this).parents('.ui-dialog')[0];        
    $(document).click(function (e) { // when anywhere in the doc is clicked
        var clickedOutside = true; // start searching assuming we clicked outside
        $(e.target).parents().andSelf().each(function () { // search parents and self
            // if the original dialog selector is the click's target or a parent of the target
            // we have not clicked outside the box
            if (this == dialogEl) {
                clickedOutside = false; // found
                return false; // stop searching
            }
        });
        if (clickedOutside) {
            $('a.ui-dialog-titlebar-close').click(); // close the dialog
            // unbind this listener, we're done with it
            $(document).unbind('click',arguments.callee); 
        }
    });     
  }
});

**更准确地说，您正在寻找一个事件，当用户在特定可见元素组之外单击时。对于用户来说，绝对定位的 div 可能看起来在一组元素的“外部”，而实际上它是其中一个元素的子元素。这不太适用，但它应该适用于您的目的。

希望有帮助。:)

于 2009-05-30T15:06:08.207 回答
1

类似于@marcosfromero（但性能更高）的解决方案是用于$.contains测试一个元素是否存在于另一个元素中。$.contains如果存在，则利用本地document.documentElement.compareDocumentPosition方法，这意味着您不必event.target转换为 jQuery 对象，不需要查询 DOM .ui-dialog，并且底层逻辑甚至不需要遍历 DOM（在现代浏览器中） ）。

$(document).click(function(event) {
    if( !$.contains( dialog.dialog('widget')[0], event.target ) ){
        $(':ui-dialog').dialog('close');    
    }
});

如果目标元素不存在由小部件创建的对话框标记（通过调用对话框的widget方法获得），则关闭对话框。

演示：http: //jsfiddle.net/ehynds/auKAu/

于 2011-05-13T19:06:19.503 回答
1

看看jquery tools overlay这可能会帮助你做模态窗口。它在过去帮助了我。

要检查点击是否在模态窗口之外，您可以执行以下操作：

echo '<div class="mybody">Body of the webpage';
echo '<div class="myoverlay">Body of overlay</div></div>';

jQuery：

$(function() {
    $('body').click(function(e) {
        var inOverlay = false;
        $(e.target).parents().each(function(idx,parent) {
            if ('mybody' == parent.className) {
                inOverlay=true;
            }
        });
        if (!inOverlay) {
            alert('outside');
        }
    });
});

然后您可以在模态窗口中添加键盘检查：

$(".myoverlay").keydown(function(e) {
   // your specific keyboard handler
});
于 2011-05-11T11:27:46.063 回答
0

我认为这可能会做到：

$("element").blur(function(){
  /* Callback goes here */
  $("element").hide();
});
于 2009-05-25T00:12:59.770 回答
0

使用 .blur() 函数......它很棒：D

http://docs.jquery.com/Events/blur

于 2009-05-25T00:13:25.027 回答
0

使用 CSS {position:fixed;height:100%;width:100%;background:transparent;z-index:100} 创建一个透明叠加层并使用$('.overlay').click(function() {$('ui-dialog').remove();}. 当然，您需要在创建<div class="overlay"></div>对话框的同时创建。并且对话框将需要更高的 z-index！

于 2011-05-12T22:59:26.833 回答