Removing the title bar from jQueryUI Dialog?

user656925 picture user656925 · Oct 15, 2012 · Viewed 11.4k times · Source

How can I remove the title bar.

I checked the API here but could not find anything.

http://api.jqueryui.com/dialog/

I noticed that other "solutions" have a cooler looking GUI then jQuery, particularly

http://www.ericmmartin.com/projects/simplemodal/

However I'd like to use jQueryUI b.c. of all the resources...online API documentation, tutorials, etc.

I just need to know how to get rid of the title bar?

Thanks

Answer

jessegavin picture jessegavin · Oct 15, 2012

There are a few options.

Hide with CSS
.ui-dialog-titlebar { display: none }

Hide with Javascript
This will remove the title bar when the dialog is created, but it will preserve the close button.

$("div").dialog({
  create: function( event, ui ) {
      var dialog = $(this).closest(".ui-dialog");
      dialog.find(".ui-dialog-titlebar-close")
            .appendTo(dialog)
            .css({
              position: "absolute",
              top: 0,
              right: 0,
              margin: "3px"
            });
      dialog.find(".ui-dialog-titlebar").remove();
  }
})​

See demo: http://jsfiddle.net/4AuhC/52/