Open In App

jQuery UI Dialog close Event

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery UI Close event is triggered when the dialog box is closed.

Learn more about jQuery selectors and events here.

Syntax:

$(".selector").dialog (
   close: function( event, ui ) {
       console.log('closed')
   },

Approach:

  • First, add jQuery Mobile scripts needed for your project.
<link href = 
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
    rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
  • ‘Open Dialog’ button will trigger the click function (#gfg) that will further open the <textarea> in a dialog (#gfg2).
  • close( event, ui ) : Triggers when we click on close button in the dialog. There is callback function attached to this close.
    • event :  Type -> Event
    • ui : Type -> Object
    • callback function : function( event, ui ) { console.log(‘closed’)}

Example 1:

HTML




<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <link href
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
         </script>
        </script>
        
  
      <script type = "text/javascript">
         $(function() {
            $( "#gfg2" ).dialog({
          autoOpen: false, 
               close: function( event, ui ) {
                  console.log('closed')
               },
            });
            $( "#gfg" ).click(function() {
               $( "#gfg2" ).dialog( "open" );
            });
         });
      </script>
   </head>
     
   <body>
      <div id = "gfg2" title="GeeksforGeeks">
         <textarea>jQuery UI | close(event, ui) Event</textarea>
      </div>
      <button id = "gfg">Open Dialog</button>
   </body>
</html>


Output:



Last Updated : 02 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads