How to remove close button on the jQuery UI dialog
How to remove the close button (the X in the top-right corner) on a dialog box created by jQuery UI?
Table Of Content
- Problem
- SOLUTION 1
- Check out the code (note the third line overriding the open function which find the button and hides it):
- To hide the close button on all dialogs we can use the following CSS too
- SOLUTION 2
- The CSS
- The HTML
- The Javascript
- SOLUTION 3
- SOLUTION 4
- We can simply use CSS to hide the close button instead of JavaScript
- SOLUTION 5
- Create a style
- Then, we can simply add the no-close class to any dialog in order to hide it’s close button
- SOLUTION 6
- It works
- SOLUTION 7
- Try this to remove close button on the jQuery UI dialog
- SOLUTION 8
- To hide the button is to filter it with it’s data-icon attribute
- SOLUTION 9
- For the deactivating the class, the short code
- SOLUTION 10
- We can also remove the header line
Check out the code (note the third line overriding the open function which find the button and hides it):
Java Code
$("#div2").dialog({
closeOnEscape: false,
open: function(event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
}
});To hide the close button on all dialogs we can use the following CSS too:
Css Code
.ui-dialog-titlebar-close {
visibility: hidden;
}- Other option just using CSS that does not over ride every dialog on the page.
The CSS
Css Code
.no-close .ui-dialog-titlebar-close {display: none }The HTML
Html Code
<div class="selector" title="No close button">
Wikitechy says This is a test without a close button
</div>The Javascript
jQuery Code
$( ".selector" ).dialog({ dialogClass: 'no-close' }); Css Code
open: function(event, ui) {
//hide close button.
$(this).parent().children().children('.ui-dialog-titlebar-close').hide();
},We can simply use CSS to hide the close button instead of JavaScript:
Css Code
.ui-dialog-titlebar-close{
display: none;
}Create a style:
Css Code
.no-close .ui-dialog-titlebar-close {
display: none;
}Then, we can simply add the no-close class to any dialog in order to hide it’s close button:
Css Code
$( "#dialog" ).dialog({
dialogClass: "no-close",
buttons: [{
text: "OK",
click: function() {
$( this ).dialog( "close" ); }
}]
});It works :
Css Code
$("#div").dialog({
open: function() { $(".ui-dialog-titlebar-close").hide(); }
});Try this to remove close button on the jQuery UI dialog:
Css Code
$(function(){
//this is your dialog:
$('#mydiv').dialog({
// Step 1. Add an extra class to our dialog to address the dialog directly. Make sure that this class is not used anywhere else:
dialogClass: 'my-extra-class'
})
// Step 2. Hide the close 'X' button on the dialog that you marked with your extra class
$('.my-extra-class').find('.ui-dialog-titlebar-close').css('display','none');
// Step 3. Enjoy your dialog without the 'X' link
})To hide the button is to filter it with it’s data-icon attribute:
Css Code
$('#dialog-id [data-icon="delete"]').hide();For the deactivating the class, the short code:
Css Code
$(".ui-dialog-titlebar-close").hide();We can also remove the header line:
Html Code
<div data-role="header">...</div>which removes the close button.
Tags:
Best way to remove the close button on jQuery UI dialog box widgetDialog remove XDialog WidgetDialog without close buttonhow to disable close button of popup window in javascriptHow to remove close button from dialog using jquery?html - How to remove close button on the jQuery UI dialog?jquery - Disable 'X' button in top-right of Dialogjquery dialog change close button textjquery dialog close button eventjquery dialog close button not showingjquery dialog remove title barjquery ui dialog close buttonjquery ui dialog close textremove close button from bootstrap modalRemove close button on jQueryUI DialogUI Dialog with option to hide Close Button
Author
Follow Me
Wikitechy Editor
Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.
Nice one