Open In App

jQuery UI Dialog close Event

Last Updated : 02 Dec, 2021
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
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 = 
"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>
      

      <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:


Article Tags :

Similar Reads