Jquery UI对话框窗口非模态视图点击外部关闭它答案

【问题标题】：Jquery UI dialog window non modal view clicking outside to close itJquery UI对话框窗口非模态视图点击外部关闭它
【发布时间】：2014-01-22 04:06:31
【问题描述】：

我遇到了一些问题，我无法在叠加层外部单击以将其关闭。我想知道是否有人有任何建议。这是一个非模态对话框。

$b("#rl_cover").click(function() {
    var overlayWidth = getWidth();

    var overlay = $b( "#rl_resize" ).dialog({
        width:overlayWidth,
        minWidth:962,
        height: 700,

        resizable:true,
        position: {
            my: "center top",
            at: "center top",
            of: "#bl_main_wrapper",
            collision: "none"
        }   
    });

});

$b("#closex").click("rl_resize", function( event, ui ){
    $b("#rl_resize").dialog( "close" );
});

请指教。

除此之外，我还尝试添加一个功能来检测我何时单击文档，但这会做一些奇怪的事情，例如当我没有点击任何地方时显示警报。

$b(document).click(function(e){
    alert('lk');
    closeme(e);
});

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

我认为你可以使用这个想法：

How do I detect a click outside an element?

你需要给html附加一个点击事件：

$("html").on("click", function() {
    // Perhaps detect if dialog is open. Less expensive than close.
    $("#rl_resize").dialog("close");
});

那么你的对话需要：

$("#rl_resize").click(function(e) {
    e.stopPropagation();
});

所以这应该允许所有点击事件在你的 html 中冒泡，除了那些在你的对话框中的部分。

你可以让你的对话框变成模态的。当您单击关闭时关闭它应该可以工作：

$(".ui-widget-overlay").on("click", function() {
    $("#rl_resize").dialog("close");
});

【讨论】：