jQuery Modal Dialog Close on Overlay Click

Updated thanks to Amir’s comment below. Thank you, Amir.

You may want a modal dialog to close if the overlay is clicked on the page. One way of doing that is to use the jquery live function.

Incidentally, you could use an overlay click event if the dialog is set to autoOpen: true, the default value of the dialog, and you do not open the dialog again with an event.

$(".ui-widget-overlay").click (function () {
    $("#dialog-id").dialog( "close" );
});

If you open the dialog with an event like click at any point whether autoOpen is set to true or false, then use jQuery.live.

Fiddle demonstrating successful overlay click event with autoOpen: true and no click event to open dialog: http://jsfiddle.net/GKfZM/2/

Fiddle demonstrating failure of overlay click event with autoOpen: false and click event to open dialog: http://jsfiddle.net/GKfZM/

Fiddle demonstrating how live works with autoOpen: false and with click event: http://jsfiddle.net/GKfZM/1/

$(function () {

			$('#mydialog').dialog({
				bgiframe: true,
				autoOpen: true,
				modal: true,
				width: 500,
				resizable: false,
				buttons: {
					Submit: function(){
						$(this).dialog('close');
					}
				}
			});

		$('#opendialog').click(function() {
                $('#mydialog').dialog('open');
           });

		$('.ui-widget-overlay').live('click', function() {
			$('#mydialog').dialog( "close" );
			});

});

The html for the dialog box includes a couple of radio buttons and a submit button just for demonstration. They do not really do anything in this example. Below is the complete code example.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Close Dialog on Overlay Click</title>
<style type="text/css" media="screen">
body {background-color: #efefef;font-family: "Trebuchet MS",sans-serif;font-size: 16px;}
h1,h2,p {padding: 5px;}
h1,h2{font-size: 18px; color: #666666;}
.container {width: 50%;margin-left: 25%;margin-top:2%;background: #ffffff;border: 4px solid #cccccc;}
#mydialog{font-size:80%}
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {

			$('#mydialog').dialog({
				bgiframe: true,
				autoOpen: true,
				modal: true,
				width: 500,
				resizable: false,
				buttons: {
					Submit: function(){
						$(this).dialog('close');
					}
				}
			});

		$('#opendialog').click(function() {
                $('#mydialog').dialog('open');
           });

		$('.ui-widget-overlay').live('click', function() {
			$('#mydialog').dialog( "close" );
			});

});
</script>

</head>

<body>
<div class="container">

<h1>Close Dialog on Overlay Click Test page</h1>
<p>Dialog will close if overlay is clicked but not if anything inside of dialog is clicked.</p>
<p><a id="opendialog" href="#">Open dialog</a></p>
<div id="mydialog" title="Overlay Click Close">
		<p>Demo of overlay close on click. Submit button will close dialog and nothing else.</p>
		<form id="popup_survey" name="popup_survey" method="post">
        <p><strong>Pink or blue?</strong><br />
		<input id="pink" type="radio" name="radio_color" value="pink"  />Pink<br />
        <input id="blue" type="radio" name="radio_color" value="blue"  />Blue</p>
        <p><strong>Soccer or futbol?</strong><br />
		<input id="soccer" type="radio" name="radio_sport" value="soccer"  />Soccer<br />
        <input id="futbol" type="radio" name="radio_sport" value="futbol"  />Futbol</p>
        </form>
</div>

</div>
</body>
</html>

Recommended:

Demo

 

Further Reading:

  1. Modal Confirmation Dialog on Form Submit: Javascript, jQuery UI, and Thickbox Varieties

13 Comments

  • Pingback: Tweets that mention jQuery Modal Dialog Close on Overlay Click - jensbits.com -- Topsy.com

  • June 19, 2010 - 7:12 am | Permalink

    very nice mate, thanks for this, I was trying to close the modal but no luck, this helped…

  • September 13, 2010 - 12:59 pm | Permalink

    Wow, you're awesome. Thanks for this great bit of code, you'll be getting a back link shortly.

    Thanks!!!

  • September 30, 2010 - 3:50 pm | Permalink

    Just in case any1 else stumbles across this – this will BREAK! Jquery.live() functions, as it unbinds $(document).click, which is what .live uses.

    Changing it to .window worked for me, though I've only tested on chrome for now.

  • October 1, 2010 - 6:48 am | Permalink

    thanks for nice and helpful post.

  • Googoo
    October 7, 2010 - 10:12 am | Permalink

    Ver nice – thanks for this.

    I am using tabs within the dialog and by clicking a tab I hab to click twice outside of the dialog in order to close it again (at least in FF 3.6).

    The below fixed this:

    $("#tabs").tabs({
    select: function(){closedialog = 1;}
    });

    Why? Beats me … thought I share

  • Googoo
    October 30, 2010 - 10:10 am | Permalink

    K – after looking into the code of the datepicker here's my final version using the click target option.

    // bind mousedown on entire document
    $(document).mousedown(function(e) {
    var clicked=$(e.target); // get the element clicked
    if(clicked.is('#modalDialog') || clicked.parents().is('#modalDialog')) {
    // clicked happend within the dialog
    } else {
    // outside click
    $('#modalDialog').dialog("close"); // let's close it
    }
    });

  • January 13, 2011 - 5:14 am | Permalink

    In case you're trying to prevent a click on the dialog to trigger a click on the overlay, thereby closing the dialog, here's another technique that doesn't require an extra variable:

    $('#dialog').click(function(e) {
    // Catch click event on dialog and prevent the event from propagating to the overlay
    e.stopPropagation();
    });
    $('#overlay').click(function() {
    // close the dialog and remove overlay
    $(this).dialog("close");
    });

  • Amir
    April 17, 2011 - 2:02 pm | Permalink

    I think it's just easier to do this:

    $('.ui-widget-overlay').live('click', function() {
    $(".dialogClass").dialog( "close" );
    });

    Just make sure all your dialogs have the "dialogClass" class.

  • July 7, 2011 - 8:21 am | Permalink

    @Kevin
    Thanks. Changed the code to use window instead.

    @Gert
    Thanks but couldn’t get that to work. I must be missing something with the #overlay selector.

    @Googoo
    Thanks for the code but it also closes the dialog when you click on the upper or lower banner on the dialog. Any clicks on the dialog should not close it unless you are clicking on the ‘x’ or the ‘Close’ button.

    @Amir
    Thanks for the simple code but it didn’t work for me.

  • srini
    July 11, 2011 - 7:35 am | Permalink

    amir’s solution worked for me (i changed it to use the id for close instead of class)… thanks for your code.. jen, however your solution didn’t seem to work in IE (even the demo)

  • July 11, 2011 - 9:32 am | Permalink

    @srini, @amir

    Thanks. Got it working and updated the post.

  • October 17, 2011 - 4:10 pm | Permalink

    Re: the Amir code, if you’re displaying the jQuery UI dialog’s title bar, you could just close the dialog by triggering a click on the visible X:

    $(‘.ui-widget-overlay’).live(‘click’, function() {
    $(“.ui-dialog-titlebar-close:visible”).click()
    });

    :D

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    *

    *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>