纯jQueryUI没有模态对话框。

Question

我想在对话框外单击时关闭对话框，但我不确定你是如何在jquery / plain javascript中测试的。

有人建议使用blur事件，但jquery对话框似乎不支持这种情况。

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

我需要这个，这样我才能在对话框最顶层时注册密钥处理程序，并在另一个对话框被置于顶部时立即取消注册。

有没有人有解决方案 - 理想情况是每次有其他对话框出现时会导致事件被提升？

Answer 1

纯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');

    }
})

Answer 2

你可以制作对话模式吗？如果是这样，那么你可以（可能）通过模态叠加上的事件实现你所追求的......

完全hacky，未经考验的想法，但它可能会起作用......

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

Answer 3

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

$('.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可能看起来是一组元素的“外部”给用户，而它实际上是这些元素之一的子元素。这对此无效，但它应该适用于您的目的。

希望有所帮助。：）

Answer 4

看一下可能有助于你做模态窗口的 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
});

Answer 5

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

.ui-dialog

如果目标元素与窗口小部件创建的对话框标记不存在（通过调用对话框的$(document).click(function(event) { if( !$.contains( dialog.dialog('widget')[0], event.target ) ){ $(':ui-dialog').dialog('close'); } });方法获得），则关闭对话框。

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

Answer 6

我认为这可能会这样做：

$("element").blur(function(){
  /* Callback goes here */
  $("element").hide();
});

Answer 7

使用.blur（）函数......它的精彩：D

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

Answer 8

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

你如何测试模态jquery对话框失去焦点？

8 个答案:

纯jQueryUI没有模态对话框。

实施例

代码：