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

我通过单击按钮启动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');
    }
}

var$dial2=“”
函数openmenu（宽度、高度、菜单ID）{if（$dial2==“”）{
$dial2=$（''）
.html（“”）
.对话({
自动打开：错误，
莫代尔：错，
高度:高度,，
宽度：宽度，
标题：“菜单”，
可拖动：错误，
可调整大小：false，
职位：{
我的“顶”，
在“左-207”处，
共：$（“#btnMenu”）
},
dialogClass:“testdia”
});
$dial2.对话框（“打开”）；
}
}

---

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

您可以将

clickoutside

close事件绑定到对话框对象

编辑：这不起作用，因为您的位置值

为：$（“#btnMenu”）

，但没有这样的元素。我添加了一个元素，您可以在这里查看工作小提琴：

var$dial2=“”
var闭合=0；
功能openmenu（宽度、高度、菜单ID）{
如果（$dial2==“”）{
$dial2=$（''）
.html（“”）
.对话({
自动打开：错误，
莫代尔：错，
高度:高度,，
宽度：宽度，
标题：“菜单”，
可拖动：错误，
职位：{
我的“顶”，
在“左-207”处，
共：$（“#btnMenu”）
},
可调整大小：false，
打开：功能（e、ui）{
闭合=0；
$（文档）.bind（'单击'，关闭对话框）；
}
});
$dial2.对话框（“打开”）；
}
}
函数closeDialog（）{
如果（关闭==0）{
$dial2.对话框（“关闭”）；
闭合=1；
}
}
openmenu（“500”、“500”、“5”）

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

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

var$dial2=“”
函数openmenu（宽度、高度、菜单ID）{if（$dial2==“”）{
$dial2=$（''）
.html（“”）
.对话({
自动打开：错误，
莫代尔：错，
高度:高度,，
宽度：宽度，
标题：“菜单”，
可拖动：错误，
可调整大小：false，
职位：{
我的“顶”，
在“左-207”处，
共：$（“#btnMenu”）
},
dialogClass:“testdia”
});
$dial2.bind（'click'，函数（e）{
e、 停止传播（）；
});
$dial2.对话框（“打开”）；
$（文档）.bind（'单击'，函数（））{
$dial2.对话框（“关闭”）；
});
}
} 

这可能对您有用：可能重复此操作可能会导致hekp-@Wabs请查看我在代码下方添加的最后一条注释。@Aishvarya请查看我在代码下方添加的最后一条注释。您的代码有错误

of:$（'#btnMenu'）

没有这样的元素。我已经更正了代码并添加了工作示例。您能检查一下吗？当我向文档中添加单击事件时，它首先会阻止对话框打开。当您单击按钮时，请在按钮单击事件中使用e.stopPropagation，因此它会阻止文档在按钮单击时的单击事件。

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