Open In App

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

Last Updated : 21 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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=
               rel="stylesheet">  
      <script src=
        </script>  
       
      <script src=
       </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

 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=
          rel="stylesheet">  
    <script src=
      </script
       
    <script src=
      </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>


Output:

 Call Hook into dialog close event

 Call Hook into dialog close event



Similar Reads

jQuery UI Dialog close Event
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.&lt;link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-u
1 min read
How to remove close button from jQuery UI dialog using jQuery ?
In this article, we will learn how to remove the close button on the jQuery UI dialog using JavaScript, This can be achieved using the hide() method. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. A dialog box is a temporary window. An application creates a dial
2 min read
jQuery UI dialog close() Method
close() method is used to disable the dialog. This method does not accept any argument Syntax: $( ".selector" ).dialog("close"); Approach: First, add jQuery UI scripts needed for your project. &lt;link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"&gt; &lt;script src = "https://code.jquery.com/jquery
1 min read
jQuery Mobile Dialog close() Method
jQuery Mobile is a web technology used to make responsive websites and apps which are accessible on smartphones, tablets, and desktop devices. In this article, we will use jQuery Mobile Dialog Widget's close() method to close an opened dialog. When the close() method is invoked on any dialog widget, it simply closes the dialog. This method does not
2 min read
How to remove close button from jQuery UI dialog using CSS ?
In this article, we will learn how to remove the close button on the jQuery UI dialog using CSS. This can be achieved by setting the display property of the ui-dialog-titlebar-close class element to none. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. A dialog b
3 min read
How to Call Function Inside Child Component from Parent Component using useRef hook ?
In ReactJS, we can pass the function reference from parent components to child components. However, there are scenarios where you may need to call the function inside the child component from the parent component. It can be done by creating a reference using the useRef hook and createRef method as well. Prerequisites :NPM &amp; Node JSReact JSReact
2 min read
Onsen UI Dialog CSS Component Material Alert Dialog
Onsen UI is an HTML5 framework that allows you to design distinctive and usable user interfaces for free (UI). It also makes UI creation easier, enabling programmers to focus on the core of the product. Onsen UI is a complex set of user interface components designed specifically for mobile apps, with ready-to-use features that follow native iOS and
4 min read
Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons 2
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Alert Dialog is used to display some warning messages with pop-ups on the webpage. Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons 2 is used to create the
2 min read
Onsen UI Dialog CSS Component Basic Alert Dialog
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Alert Dialog is used to display some warning messages with pop-ups on the webpage. Onsen UI Dialog CSS Component Basic Alert Dialog is used to create the basic alert dialo
2 min read
Onsen UI Dialog CSS Component Alert Dialog without Title
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Alert Dialog is used to display some warning messages with pop-ups on the webpage. Onsen UI Dialog CSS Component Alert Dialog without Title is used to create the alert dia
2 min read