Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to eliminate close button from jQuery UI dialog box using CSS?
The CSS display: none property can be used to eliminate the close button from jQuery UI dialog boxes. This is useful when you want to force users to interact with the dialog content instead of simply closing it.
Syntax
.ui-dialog-titlebar-close {
display: none;
}
jQuery UI Dialog Box Overview
The jQuery UI dialog() method creates a modal dialog window that floats above the page content. By default, it includes a close button (×) in the title bar that allows users to close the dialog.
Basic Dialog Syntax
$(selector).dialog(options);
Method 1: Using CSS Display Property
The most straightforward way to remove the close button is by hiding it with CSS
<!DOCTYPE html>
<html>
<head>
<title>Remove Close Button from Dialog</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<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>
<style>
.ui-dialog-titlebar-close {
display: none;
}
.dialog-content {
padding: 20px;
text-align: center;
}
#openDialog {
padding: 10px 20px;
margin: 20px;
font-size: 16px;
}
</style>
</head>
<body>
<button id="openDialog">Open Dialog</button>
<div id="myDialog" title="Sample Dialog" class="dialog-content">
<p>This dialog has no close button. Use the OK button below to close.</p>
<button onclick="$('#myDialog').dialog('close')">OK</button>
</div>
<script>
$(document).ready(function() {
$("#myDialog").dialog({
autoOpen: false,
width: 400,
height: 200,
modal: true
});
$("#openDialog").click(function() {
$("#myDialog").dialog("open");
});
});
</script>
</body>
</html>
A button appears on the page. When clicked, it opens a modal dialog box without the close (×) button. The dialog can only be closed using the "OK" button inside the dialog content.
Method 2: Using jQuery UI Options
You can also remove the close button by setting the closeOnEscape and dialogClass options
<!DOCTYPE html>
<html>
<head>
<title>Remove Close Button - Method 2</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<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>
<style>
.no-close .ui-dialog-titlebar-close {
display: none;
}
.custom-dialog {
background-color: #f0f8ff;
border: 2px solid #4a90e2;
}
#openDialog2 {
padding: 12px 25px;
margin: 20px;
background-color: #4a90e2;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button id="openDialog2">Open Custom Dialog</button>
<div id="customDialog" title="Custom Dialog">
<p>This dialog uses a custom CSS class to hide the close button.</p>
<p>Click outside or press Escape to close (if enabled).</p>
</div>
<script>
$(document).ready(function() {
$("#customDialog").dialog({
autoOpen: false,
width: 350,
height: 180,
modal: true,
dialogClass: "no-close custom-dialog",
closeOnEscape: true
});
$("#openDialog2").click(function() {
$("#customDialog").dialog("open");
});
});
</script>
</body>
</html>
A blue button appears. When clicked, it opens a styled dialog box without the close button. The dialog can be closed by pressing the Escape key or clicking outside the modal area.
Key Points
- The
.ui-dialog-titlebar-closeclass targets the close button element - Setting
display: nonecompletely hides the close button - Always provide alternative ways to close the dialog (custom buttons, escape key)
- Use
dialogClassoption to apply custom CSS classes to specific dialogs
Conclusion
Removing the close button from jQuery UI dialog boxes is easily achieved using CSS. The display: none property on the .ui-dialog-titlebar-close class effectively hides the button, giving you full control over how users interact with your dialogs.
2K+ Views
