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则隐藏对话框。

修改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/

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

1 个答案: