How to call Hook into dialog close event in jQuery UI ?

Last Updated : 21 Dec, 2022

In this article, we are going to learn how we can call Hook into a “dialog” close event in jQuery UI.

To call a hook into the dialog “close” event in jQuery UI, we will use the close event provided by the dialog widget. This event is fired when the dialog is closed. Let’s understand what a hook is, a hook is a function that is executed at a specific point in the lifecycle of an element or widget. Hooks allow developers to add custom behavior to elements and widgets by attaching functions to be executed at specific points in the element or widget’s lifecycle.

To attach a function to the close event, we can use the “on” method provided by the “dialog” widget. This method allows you to specify the event you want to attach the function to, as well as the function itself.

Syntax:

$(element).widget({
  hookName: function(event, ui) {
    // Code to be executed when the hook is called
  }
});

Example 1: In this example, we will call a hook into the dialog close event and reveal the “GeeksforGeeks” logo on the webpage.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head>     
     <title>Close Hook into dialog close event.</title> 
     <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>  
        
      <style> 
          .box{ 
              height: 100px; 
              width: 100%; 
              font-size: 30px; 
              display: flex; 
              align-items: center; 
              justify-content: center; 
              opacity: 0; 
              color: Green; 
           }        
      </style> 
</head> 
  
<body> 
    <div id="dialog"> 
        Close this dialog box to reveal the GeeksforGeeks Text. 
    </div> 
    <div class="box"> 
        <h2>GeeksforGeeks</h2> 
    </div> 
    <script> 
        $("#dialog").dialog({ 
            title: "GeeksforGeeks", 
            close: function() { 
            // The code will run when the dialog is closed. 
            $(".box").animate({opacity : 1}) 
          } 
        }); 
    </script> 
</body> 
</html>

Output:

Call Hook into dialog close event

Example 2: In this example, we will call the hook into the dialog close event and change the color of the text available on the webpage.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head>     
    <title>Close Hook into dialog close event.</title> 
    <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>  
        
   <style> 
        .box{ 
            height: 500px; 
            width: 100%; 
            font-size: 30px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
        }        
   </style> 
</head> 
  
<body> 
    <div id="dialog"> 
        Close this dialog box to change the color of the text. 
    </div> 
    <div class="box"> 
        <h2>GeeksforGeeks</h2> 
    </div> 
    <script> 
  
        $("#dialog").dialog({ 
            title: "GeeksforGeeks", 
            close: function() { 
            // The code will run when the dialog is closed. 
            $(".box").css("color", "green"); 
          } 
        }); 
  
    </script> 
</body> 
</html>