当我在实际对话框框架之外单击时，如何关闭 jQuery 对话框？

Question

我通过单击按钮启动 jQuery 模态窗口，并希望在我单击对话框外的某个位置时关闭它。有谁知道如何做到这一点？

这就是对话框的创建方式：

var $dial2 = ""


    function openmenu(width, height, menuID){ if ($dial2 == "") {
        $dial2 = $('<div></div>')
                       .html('<iframe id="dial2" style="border: 0px; " src=/CustomControls/PageSubMenu.aspx?&menuID="' + menuID + '" width="100%" height="100%"></iframe>')
                       .dialog({
                           autoOpen: false,
                           modal: false,
                           height: height,
                           width: width,
                           title: 'Menu',
                           draggable: false,
                           resizable: false,
                           position: {
                               my: 'top',
                               at: 'left-207',
                               of: $('#btnMenu')
                           },
                           dialogClass: "testdia"
                       });
        $dial2.dialog('open');
    }
}

只是为了让您知道我已经尝试了在 stackoverflow 上的帖子中显示的选项（2 x 用于非模态），但它们不起作用，这就是我发布此内容的原因。我想这与 iframe 等有关，所以这是一个特例。

Answer 1

您可以使用文档的单击事件来关闭对话框。 在这里我绑定一个代码以便更好地理解。

var $dial2 = ""

function openmenu(width, height, menuID){ if ($dial2 == "") {
   $dial2 = $('<div></div>')
             .html('<iframe id="dial2" style="border: 0px; " src=/CustomControls/PageSubMenu.aspx?&menuID="' + menuID + '" width="100%" height="100%"></iframe>')
             .dialog({
                autoOpen: false,
                modal: false,
                height: height,
                width: width,
                title: 'Menu',
                draggable: false,
                resizable: false,
                position: {
                   my: 'top',
                   at: 'left-207',
                   of: $('#btnMenu')
                },
                dialogClass: "testdia"
             });
             $dial2.bind('click',function(e){
                e.stopPropagation();
             });
             $dial2.dialog('open');

             $(document).bind('click',function(){
                $dial2.dialog('close');
             });
          }
      } 

Answer 2

您可以将clickoutside 关闭事件绑定到您的对话框对象

编辑：这不起作用，因为您有位置值of:$('#btnMenu')，但没有这样的元素。我添加了一个元素，您可以在这里查看工作小提琴：http://jsfiddle.net/53v5E/

var $dial2 = ""
var closed = 0;

function openmenu(width, height, menuID) {
    if ($dial2 == "") {
        $dial2 = $('<div></div>')
            .html('<iframe id="dial2" style="border: 0px; " src="http://jsfiddle.net/echo/jsonp/" width="100%" height="100%"></iframe>')
            .dialog({
            autoOpen: false,
            modal: false,
            height: height,
            width: width,
            title: 'Menu',
            draggable: false,
            position: {
                my: 'top',
                at: 'left-207',
                of: $('#btnMenu')
            },
            resizable: false,
            open: function (e, ui) {
                closed = 0;
                $(document).bind('click', closeDialog);
            }
        });
        $dial2.dialog('open');
    }
}

function closeDialog() {
    if (closed == 0) {
        $dial2.dialog('close');
        closed = 1;
    }
}

openmenu("500", "500", "5")