How to Remove the “X” on jQuery UI dialog

I’ve just recently started learning how to use the jQuery UI framework.  Seems very useful, and although I haven’t personally tested yet, supposedly has good cross browser support.

I use the jQuery UI dialog box on my site. I’ll write another post about how to customize them completely, but in this case I just wanted to remove the close “X” in the upper right corner that comes in the dialog box by default.  It’s super simple; you just need to add a CSS rule to make it’s display: none;

.ui-dialog-titlebar-close {
  display: none;
}

This removes the closing “x” from all dialog boxes. If you want to just remove it from a single one, then add your own custom class to the rule above, for example:

.ui-dialog-titlebar-close .no-x {
  display: none;
}

And then just add this class to whichever dialog box you want to get rid of the “x”.

$( "#dialog" ).dialog({
  dialogClass: "no-x",
  buttons: [
    {
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );
      }
    }
  ]
});

Some credit also here

Advertisements