jQuery pop up add close function by clicking anywhere off pop up

Question

I'm using jQuery dialog to make a pop up box but I can seem to get it to close on click anywhere off the box, I tried adding

closeOnContentClick: true

here is my code:

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#OpenDialog").click(function () {
            $("#dialog").dialog({modal: true, height: 590, width: 1005, closeOnContentClick: false });
        });
    });
</script>

<a id="OpenDialog" href="#">Click here to open dialog</a>
<div id="dialog" title="Dialog Title">
    <p>pop up</p>
</div>

Any advice on how to get the box to close when you click anywhere off of it?

Answer 1

Check this out it might be perfect for you. http://jsfiddle.net/jasonday/6FGqn/

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

<div id="dialog">Your non-modal dialog</div>
<a href="#" id="open">Open dialog</a>

jQuery(document).ready(function() {
jQuery("#dialog").dialog({
    autoOpen: false,
    modal: true,
    open: function(){
        jQuery('.ui-widget-overlay').bind('click',function(){
            jQuery('#dialog').dialog('close');
        })
    }
});
});