331 views
How to remove close button from jQuery UI dialog using jQuery and css
To remove the close button (also known as the “X” button) from a jQuery UI dialog using jQuery and CSS, you can use the following approach:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Remove Close Button from jQuery UI Dialog</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="myDialog">
<p>This is a sample jQuery UI dialog.</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="script.js"></script>
</body>
</html>CSS (styles.css):
.ui-dialog-titlebar-close {
display: none;
}JavaScript (script.js):
$(document).ready(function() {
$('#myDialog').dialog({
autoOpen: false,
modal: true,
width: 400
});
$('#openDialogBtn').click(function() {
$('#myDialog').dialog('open');
});
});Explanation:
- In the HTML file, we have a
<div>with the IDmyDialog, which will serve as the content of the jQuery UI dialog. We link to the jQuery UI CSS to style the dialog. - In the CSS file (
styles.css), we use the selector.ui-dialog-titlebar-closeto target the close button element inside the dialog title bar. We set itsdisplayproperty tononeto hide the close button. - In the JavaScript file (
script.js), we use jQuery to initialize the dialog. TheautoOpen: falseoption ensures that the dialog is not opened automatically when the page loads. We use themodal: trueoption to make the dialog modal, meaning the user must interact with it before interacting with the rest of the page. Thewidth: 400option sets the width of the dialog. - The dialog is opened when the “Open Dialog” button is clicked.
With this setup, the close button in the title bar of the jQuery UI dialog will be removed, and users won’t be able to close the dialog by clicking on the close button. The dialog can still be closed using other methods like pressing the Esc key or clicking outside the dialog if the modal option is set to true.