CODEWITHSUNDEEP
javascriptjquery
trai bui
trai bui

Reputation: 598

close jquery dialog when click outsite

I have dialog and now I want to close dialog when I click outsite dialog or move mouse out dialog,I do not know why it can not work, here is my code:

 <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script text="langue/javascript">
$(document).ready(function(){
    $(".popup").click(function(){   
        $( "#dialog-message" ).dialog({
                     modal: true,
                     title: 'Detail',
                     buttons: {
                     Ok: function() {
                         $( this ).dialog( "close" );
                         }
                     },                                      
                }); 
    }); 

    $(".ui-widget-overlay").click (function () {
     $("#dialog-message").dialog( "close" );
    });
});
</script>
<body>
<div id="dialog-message"> 
</div>
<a href="#" class="popup">click</a>
</body>
</html>

thankyou very much

Upvotes: 1

Views: 1263

Answers (2)

arun15thmay
arun15thmay

Reputation: 1062

$(document).mouseup(function(e) {
  var alert_box = $(".ui-widget-overlay");
  if (alert_box.has(e.target).length === 0)
     $("#dialog-message").dialog("close");
});

The above code will close the dialog box when you click outside the modal box

Upvotes: 0

Eric
Eric

Reputation: 18912

That is because the selector ".ui-widget-overlay" does not yet exists in that context. You need to wait before it exists. You see, it is not created until you actually open the dialog.

One quick fix, is to apply the click event to the document, and filter out the ".ui-widget-overlay" selector, as such:

$(document).on('click', ".ui-widget-overlay", function(){
    $("#dialog-message").dialog( "close" );
});

Upvotes: 1

Related Questions