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

IT技术 javascript jquery jquery-ui jquery-ui-dialog
2021-02-10 05:49:52

我有一个 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');
    });
});
6个回答

很抱歉拖了这么久，但我使用了下面的。有什么缺点吗？看到打开的功能...

$("#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'); 
        }); 
    }
});
@NickSpacek - 当它不是模态时，我只需单击一下就可以将焦点设置到一个字段，打开一个新对话框等。对于模态对话框，我必须单击两次：一次关闭它，一次执行下一步操作。
2021-03-15 05:49:52
我喜欢这个。是否存在您不希望它是模态但仍希望单击外部关闭的情况？对我来说没有意义（我想使用模态你会失去悬停在外部/下方元素上）。
2021-03-24 05:49:52
谢谢！您还可以利用 jQuery 实时冒泡。$('body').on('click', '.ui-widget-overlay', close);
2021-04-01 05:49:52
实际上，这仅在 UI 窗口是模态的情况下才有效。如果你想关闭模态对话框很有用
2021-04-06 05:49:52
非常好。我只是将其更改为这样，因此不必显式设置 ID 引用：$('.ui-widget-overlay').bind('click', function () { $(this).siblings('.ui-dialog').find('.ui-dialog-content').dialog('close'); });
2021-04-06 05:49:52

忘记使用另一个插件：

这里有 3 种方法可以在单击 popin 外部时关闭 jquery UI 对话框：

如果对话框是模态的/有背景覆盖：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');
                        }
                       }
                      );

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


  });
@personne3000 - 实际上你对上下文是正确的，选择器同时选择了两者。我试图记住我为什么添加它，因为我一定有一个我现在不记得的特定原因。
2021-03-20 05:49:52
伟大的！我稍微更改了模态对话框的打开选项功能，因此无需显式命名元素。open : function () { $('.ui-widget-overlay').on('click', function () { $(this).parents("body").find(".ui-dialog-content").dialog("close"); }); }
2021-03-25 05:49:52
@Jason 为避免与多个对话框发生冲突，您可以使用命名空间事件 click.myNamespace
2021-03-27 05:49:52
请注意，对于解决方案 #2， .is('.ui-dialog, a') 必须更改为 .is('.ui-dialog,whateverYouClickOnToOpenTheDialog')
2021-04-04 05:49:52
@Jason 由于逗号，我认为这一行实际上是在说“不是 ui 对话框或页面中的任何链接”。如果我将示例中的“打开对话框”链接更改为 <span>，对话框会在打开后立即关闭，因为窗口事件是最后触发的，这就是为什么我认为您需要排除单击打开的项目的原因对话。我不明白为什么你需要在对话框中引用链接？
2021-04-11 05:49:52

查看jQuery 外部事件插件

让你做：

$field_hint.bind('clickoutside',function(){
    $field_hint.dialog('close');
});
如果对话框打开，您只关心外部的点击。所以只能在打开后绑定。
2021-04-05 05:49:52
我得到了相同的行为，因为单击 $('.hint') 元素时不会显示提示。这些元素在对话框的“外部”。
2021-04-07 05:49:52
该对话框在文档中多次重复使用，因此在关闭对话框时我必须有一种解除绑定的方法。我认为过滤是一个更简单的解决方案。
2021-04-08 05:49:52
我在另一个地方读到关于基于事件的过滤，这解决了问题：groups.google.com/group/jquery-ui/msg/a880d99138e1e80d
2021-04-11 05:49:52

只需添加此全局脚本，只需单击它们的外部即可关闭所有模式对话框。

$(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");
            }
        });
    });;
});
我没有使用模态对话框。这里得票最多的答案也适用于模态对话框。
2021-03-24 05:49:52
这是我的： $(document).on('click', '.ui-widget-overlay', function() { $('#'+$('.ui-dialog-content')[0].id).dialog('close'); });
2021-03-26 05:49:52
在同一页面上多次使用同一个对话框时，这是唯一的方法，因为如果您在 open 函数中绑定它，它只会工作一次。感谢这个好主意！
2021-04-02 05:49:52 
$(".ui-widget-overlay").click (function () {
    $("#dialog-id").dialog( "close" );
});

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

我使用了这个解决方案。这很简单！
2021-03-20 05:49:52
我去看看。谢谢珍！
2021-03-25 05:49:52
其它你可能感兴趣的问题
上一篇“document.getElementByClass 不是函数” 下一篇获取特定时区的时间