JavaScript关闭对话框（如果用户确实单击了其他位置）

Question

在我的网站上，我使用JavaScript打开了一个模态/对话框，但是当用户单击同一视图上的另一个选项卡时，模态仍然会存在并且会一直存在。 因此，如果用户单击模态，我想将其关闭。 但是我不确定该怎么做，我知道OnBlur属性，但是我还没有想出一个可行的解决方案。 这是我的脚本：

        $("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 220,
        width: 305,
        modal: true,
        buttons: {
            'Spara': function () {

                if (!validateNumber()) {
                    alert('Procent måste vara mellan 0-100');
                    return false;
                }
                if (!validateProject()) {
                    alert('Du måste välja ett project');
                    return false;
                }
                if (!validateDate()) {
                    return false;
                }

                locstring = "@(Url.Action("Index"))/Update/?";

                locstring += '&projectId=' + $('#projectList').val();
                locstring += '&startDate=' + $('#startDate').val();
                locstring += '&endDate=' + $('#endDate').val();
                locstring += '&pct=' + $('#pct').val();

                var sid = $('#sId').text();
                if (sid !== "") {
                    locstring += '&id=' + sid;
                }

                $.ajax({
                    type: "GET",
                    url: locstring,
                    dataType: "html",
                    success: function (data) {
                        $('#dialog').dialog('close');
                        reloadTable();
                    }
                });
            },
            'Avbryt': function () {
                $(this).dialog('close');
            },
            'Ta bort': function () {
                var sid = $('#sId').text();
                if (sid != "") {
                    locstring = "@(Url.Action("Index"))/Delete/" + sid;

                    $.ajax({
                        type: "GET",
                        url: locstring,
                        dataType: "html",
                        success: function(data) {
                            $('#dialog').dialog('close');
                            reloadTable();
                        }
                    });
                }
            }
        },
        close: function() {
            allFields.val('').removeClass('ui-state-error');
        }
    });

    $('#create-user').click(function() {
            $('#dialog').dialog('open');
        })
        .hover(
            function() {
                $(this).addClass("ui-state-hover");
            },
            function() {
                $(this).removeClass("ui-state-hover");
            }
        ).mousedown(function() {
            $(this).addClass("ui-state-active");
        })
        .mouseup(function() {
            $(this).removeClass("ui-state-active");
        });

});

Answer 1

有一个名为isShowing的标志，在显示对话框时将其设置为true ，并将事件侦听器附加到主体或您的主容器中，以检查是否单击。 然后检查标志isShowing是否为true，如果为true则隐藏对话框。

编辑1

另一个解决方案

的HTML

<div id="dialog">Some demo text here.</div>
<div>some other demo text</div>

的CSS

#dialog {
    height: 300px;
    width: 300px;
    border: 2px solid orange;
}

的JavaScript

document.addEventListener("click", function (e) {
    if (e.target.id != "dialog") {
        document.getElementById("dialog").style.display = "none";   
    }
});

这里是比较单击的元素的ID，如果它不等于对话框，那么我们将隐藏对话框。

例

http://jsfiddle.net/1e5vz8vc/