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

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>
<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:
jQuery-Questions
jQuery-UI
jQuery-UI-Dialog
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?