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 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();We will see how to create a jQuery UI dialog, along with understanding its implementation. Here, we will use the CDN links to accomplish this task, you can download the jQuery from their official website.
Approach:
-
Firstly, add the jQuery and jQuery UI CDN 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.
$("#demoDialog").dialog();
Example: This example illustrates the dialog box with a close button.
<!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=
<script src=
</script>
<script src=
</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:
jQuery UI dialog
Here, we will see how to remove the close button on the jQuery UI dialog using CSS.
Syntax:
.ui-dialog-titlebar-close {
display: none;
}Approach: By setting the display property of the ui-dialog-titlebar-close class element to none.
-
Firstly, add the jQuery and jQuery UI CDN 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.
$("#demoDialog").dialog();
Now, using the class selector, select .ui-dialog-titlebar-close and hide it by setting the display property as none.
Example: This example illustrates the removing the close button from the dialog box using CSS.
<!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=
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function() {
$("#demoDialog").dialog();
});
</script>
<style>
.ui-dialog-titlebar-close {
display: none;
}
</style>
</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: