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

Question

On my website I open a modal / dialog with JavaScript, how ever when the user clicks on another tab on the same view the modal will still be there and be in the way. So if the user clicks of the modal I would like to close it. But I am not sure how to do it, I know the OnBlur attribute but I haven't come up with a solution that works just yet. This is my script:

        $("#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");
        });

});

Possible duplicate of [jQuery UI dialogs: how to close dialog when click outside?](http://stackoverflow.com/questions/8306547/jquery-ui-dialogs-how-to-close-dialog-when-click-outside) — mrhn, Oct 15 '15 at 10:46

Script47 · Accepted Answer · 2015-10-15T10:43:28.743

1

Have a flag called isShowing which is set to true when the dialog is showing, and attach an event listener to the body or your main container which checks for a click. Then check if the flag isShowing is true, if it is true then hide the dialog.

Edit 1

Another solution,

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

Here were are comparing the ID of the element clicked and if it does not equal to dialog then we hide the dialog.

Example

http://jsfiddle.net/1e5vz8vc/

edited Oct 15 '15 at 10:43

answered Oct 15 '15 at 10:37

Script47

14,230
4
45
66

Thanks a ton for your fast respond. – Joakim Carlsson Oct 15 '15 at 10:56
It seems to be 1 kind of problem, when it closes it will close everything but it will still leave my 3 buttons that it creates. – Joakim Carlsson Oct 15 '15 at 10:59
@JoakimCarlsson remove all the children of that element to make it work. – Script47 Oct 15 '15 at 11:46

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

1 Answers1