Javascript关闭对话框，如果用户点击其他地方

Javascript close dialog if the if the user did click somewhere else

本文关键字：其他 用户 如果 对话框 Javascript      更新时间：2023-09-26

在我的网站上，我用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");
        });
});

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

编辑1

另一个解决方案,

<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，如果它不等于dialog，那么我们隐藏这个对话框。

http://jsfiddle.net/1e5vz8vc/

相关文章：