How to remove the close button (the X in the top-right corner) on a dialog box created by jQuery UI?

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();
    }
});
[ad type=”banner”]

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>
[ad type=”banner”]

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;
}
[ad type=”banner”]

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();
[ad type=”banner”]

We can also remove the header line:

Html Code 
<div data-role="header">...</div>

which removes the close button.

Categorized in:

CSSJQUERY

Tagged in:

, , , , , , , , , , , , , , , ,