当我在实际对话框框架之外单击时，如何关闭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

您可以将clickoutside close事件绑定到对话框对象

编辑：这没有用，因为您的位置值为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")

Answer 2

您可以使用文档的click事件关闭对话框。 在这里，我绑定代码以更好地理解。

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