How to remove close button from jQuery UI dialog using jQuery ?

Last Updated : 30 Dec, 2021

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 dialog box to retrieve user input, prompt the user for additional information for menu items.

Syntax:

$("Selector").dialog();

Approach:

Firstly, add the below jQuery and JQuery UI CDN links to the script or download them to your local machine.
<script src="http://code.jquery.com/jquery-2.1.3.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
Create a div in the body, for the dialog box and keep id as demoDialog.
Now, using the jQuery dialog() method, create the jQuery UI dialog.

Example 1: This example illustrates the dialog box with a close button. HTML

<!DOCTYPE html>
<html>

<head>
    <title>jQuery UI Dialog : demo dialog</title>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link rel="stylesheet" 
          href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css">
    <script src=
"https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/ui/1.11.2/jquery-ui.js">
    </script>
    <script>
        $(document).ready(function() {
            $("#demoDialog").dialog();
        });
    </script>
</head>

<body>
    <h1> Dialog Widget with Close button</h1>
    <div id="demoDialog" title="My Dialog Box">
        <p>Welcome to GeeksforGeeks</p>
    </div>
</body>

</html>

Output:

Here, we will see removing the close button on the jQuery UI dialog using JavaScript.

Syntax:

$("Selector").dialog({
        open: function () { $(".ui-dialog-titlebar-close").hide(); }
});

Approach: Create a div in the body, for the dialog box and keep id as demoDialog. Now, using the jQuery dialog() method, create the jQuery UI dialog, and in the open event, the handler will write a function to remove the hide button. Select the close button using the class "ui-dialog-titlebar-close" and hide it using the hide() method.

Example 2: This example illustrates the removing the close button from the dialog box.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>jQuery UI Dialog : demo dialog</title>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link rel="stylesheet" 
          href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css">
    <script src=
"https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/ui/1.11.2/jquery-ui.js">
    </script>
    <script>
        $(function() {
            $("#demoDialog").dialog({
                open: function() {
                    $(".ui-dialog-titlebar-close").hide();
                }
            });
        });
    </script>
</head>

<body>
    <h1> Dialog Widget without Close button</h1>
    <div id="demoDialog" title="My Dialog Box">
        <p>Welcome to GeeksforGeeks</p>
    </div>
</body>

</html>

Output:

How to create a Dialog Popup using jQuery Mobile ?

pulamolusaimohan

Improve

Article Tags :

How to remove close button from jQuery UI dialog using jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?