jquery ui dialogbox close on click anywhere

Question

i want to close my popup if i clicked on anywhere outside of popupbox
$(".popup").dialog({

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".popup").dialog({
                autoOpen: false,
                draggable: true,
                title: "Add New Person",
                open: function (type, data) {
                    $(this).parent().appendTo("form");
                }
            });
            $("#body1")
              .bind(
               'click',
               function (e) {
                if (
             jQuery('.popup').dialog('isOpen')
             && !jQuery(e.target).is('.ui-dialog, a')
             && !jQuery(e.target).closest('.ui-dialog').length
            ) {
                    jQuery('.popup').dialog('close');
                }
               }
              );
        });
        function showDialog(id) {
            $('#' + id).dialog("open");
        }
        function closeDialog(id) {
            $('#' + id).dialog("close");
        }
    </script>
</head>
<body id="body1">
    <input type="button" onclick="showDialog('pop101');" value="Popup1" />
    <input type="button" onclick="showDialog('pop102');" value="Popup2" />
    <input type="button" onclick="showDialog('pop103');" value="Popup3" />
    <div style="background: green" id='pop101' class="popup">
    </div>
    <div style="background: orange" id='pop102' class="popup">
    </div>
    <div style="background: blue" id='pop103' class="popup">
    </div>
</body>
</html>

click on buttoon to open a popup and when we click on outside of popup, i want the popup hide, how is it possible?

Possible duplicate http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside — Hazem Salama, Sep 18 '12 at 12:26
actually i tried things from here and there ( stackoverlflow) and i am not able to solved that's why i posted :) — vir, Sep 18 '12 at 12:30
Are you using this as a modal? i.e. blocking all access to the underlying page while it is open? — Hazem Salama, Sep 18 '12 at 12:41
i am not able to understand your question, i am using Jquery UI dialog box — vir, Sep 18 '12 at 12:57
A modal is a dialog (or pop-up) that prevents access to the rest of the page, so as long it is displayed users cannot interact with the rest of the page before closing the dialog. Is this how you are using it? Or you must allow access to other elements on the screen? Non-Modal http://jqueryui.com/demos/dialog/default.html Modal http://jqueryui.com/demos/dialog/modal.html — Hazem Salama, Sep 18 '12 at 14:14

score 0 · Answer 1 · answered Sep 18 '12 at 12:38

You should be able to detect clicking anywhere in the document using $(document).click(function(e) { }); - keeping a flag/boolean to indicate current popup state if necessary - (without examining your markup, this has worked in the past but might not for your situation/structure) or you could create an 'overlay' that sits upon all elements of your site barring the dialog, which sits atop, and then detect clicking of thaty backing element.

webdeveloper · Answer 2 · 2012-09-18T14:12:51.167

0

As example look at this:

$(document).ready(function ()
{
    $(".popup").dialog({
        autoOpen: false,
        draggable: true,
        title: "Add New Person",
        open: function (type, data) {
            $(this).parent().appendTo("#container");
        }
    });
    $('[data-popup^="pop"]').click(function(e){
        close(); //close all opened dialogs
        e.stopPropagation(); // stop body1 click
        $('#' + $(this).data('popup')).dialog("open");
    });

    var close = function()
    {
        $('.ui-dialog:visible').find('.popup').dialog('close');
    };

    $('#body1').click(close);
});

Demo: jsfiddle.net/pXszH/2/

edited Sep 18 '12 at 14:12

answered Sep 18 '12 at 12:41

webdeveloper

17,174
3
48
47

hold on, what is different between dialog box and modal? – vir Sep 18 '12 at 13:02
@webdevloper,it's not working good, sometimes works and sometimes not , code : http://pastebin.com/QNMahMJ5 – vir Sep 18 '12 at 13:56

score 0 · Answer 3 · answered Sep 18 '12 at 12:44

0

This appears to work:

open: function() {
    var self = this;
    $(this).parent('.ui-dialog').on('click', false);
    $(document).one('click', function() {
        $(self).dialog('close');
    });
}

the idea being that you catch any click within the dialog itself, but allow any other click to fall through to the document (with a "one-off" event handler) and close the dialog.

See http://jsfiddle.net/alnitak/RJ7nt/

answered Sep 18 '12 at 12:44

Alnitak

334,560
70
407
495

because you're using an _ancient_ version of jQuery that doesn't support `.on`. It will probably work if you use `.bind` instead. p.s. please learn some manners... – Alnitak Sep 18 '12 at 13:21
then please (carefully) upgrade to a (much) more recent version of jQuery and jQuery UI. – Alnitak Sep 18 '12 at 13:27

jacobq · Answer 4 · 2012-09-18T13:08:55.953

Here you go: jsFiddle example

HTML:

<form id="popup-buttons">
    <input type="button" value="Popup1" data-popup-id="pop101"/>
    <input type="button" value="Popup2" data-popup-id="pop102"/>
    <input type="button" value="Popup3" data-popup-id="pop103"/>
</form>
<div style="background: green" id='pop101' class="popup">
</div>
<div style="background: orange" id='pop102' class="popup">
</div>
<div style="background: blue" id='pop103' class="popup">
</div>

JavaScript:

function showDialog(id) {
    $('#' + id).dialog("open");
}
function closeDialog(id) {
    $('#' + id).dialog("close");
}    

$(document).ready(function () {
    // Handle clicks on buttons
    //$("#popup-buttons").on("click", "input", function(e) {    // for new jQuery....
    $("input[type=button]").click(function(e) {      // for old jQuery
        console.log("input click", e);
        var value = $(e.currentTarget).attr("data-popup-id");
        if (value)
            showDialog($(e.currentTarget).attr("data-popup-id"));
        else
            console.log("Error: user clicked on unexpected element");
        // Stop elements further up the DOM tree from processing this event
        e.stopPropagation();
    });

    // Handle "other" clicks
    $("html").click(function(e) {
        console.log("default click handler", e);
        $("div.popup").each(function(i,e) {
            closeDialog($(this).attr("id"));
        });
    });

    $(".popup").dialog({
        autoOpen: false,
        draggable: true,
        title: "Add New Person",
        open: function (type, data) {
            $(this).parent().appendTo("form");
        }
    });
});

but , what if i have 10 popup in same page, i like to minimize this j query code :( , also it is no necessary that all buttons are in one form — vir, Sep 18 '12 at 12:55
You can just modify the selector. How is that more difficult than hard-coding an onclick to the HTML tag? I will modify it slightly to show you what I mean, but I highly recommend delegating the events to a containing element so that there is just one handler instead of one for each element. For example: http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html — jacobq, Sep 18 '12 at 13:02

score 0 · Answer 5 · answered Sep 19 '12 at 05:59

0

@ all, thanks for your efforts, you guys are amazing.. i learned lots

the working code is here : http://pastebin.com/7CvWWqC9

answered Sep 19 '12 at 05:59

vir

1,081
4
19
31

jquery ui dialogbox close on click anywhere

5 Answers5