从jQueryUI对话框中删除标题栏？

Question

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 bc of all the resources...online API documentation, tutorials, etc.

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

Thanks

Answer 1

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/

Answer 2

Given el as the original element from which the dialog was created:

$(el).siblings('.ui-dialog-titlebar').remove();

See http://jsfiddle.net/alnitak/N9TGd/

Note that actually removing the titlebar (per the question title) will also remove the close button, and break the ability to drag the dialog box!

Answer 3

Add this CSS after jQuery UI's CSS.

Be careful: no more close buttons and you can't drag it anymore!

.ui-dialog-titlebar { display: none }

jsFiddle: http://jsfiddle.net/PeVvA/

If you want to keep drag and buttons, but it might not work on all themes..

.ui-dialog-titlebar { background: none; border: 0px solid black }​

jsFiddle: http://jsfiddle.net/PeVvA/1/

You could probably do more just by using CSS. I'd probably play with height.

Answer 4

You can try adding this to your CSS directly..

.ui-dialog-titlebar
{ 
   display: none !important;
}

Answer 5

Try this:

$(".ui-dialog-titlebar").hide()

(Or)

$("#dlg").dialog({
  open: function() {
    $(this).dialog("widget").find(".ui-dialog-titlebar").hide();
  }
});

Answer 6

If you want to remove the titelbar and keep the close icon using styles only, use the styles below. It shrinks the title bar to the size of the close icon and hides it behind. ui-icons_6e6e6e_256x240.png I created by lightening the ui-icons_222222_256x240.png image that jqueryui comes with.

.ui-dialog .ui-dialog-titlebar.ui-widget-header{background: none; border: none; height: 20px; width: 20px; padding: 0px; position: static; float: right; margin: 0px 2px 0px 0px;}

.ui-dialog-titlebar.ui-widget-header .ui-dialog-title{display: none;}

.ui-dialog-titlebar.ui-widget-header .ui-button{background: none; border: 1px solid #CCCCCC;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin: 0px; position: static;}

.ui-dialog .dialog.ui-dialog-content{padding: 0px 10px 10px 10px;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{position: relative; margin-top: 0px; margin-left: 0px; top: 0px; left: 0px;}

.ui-dialog .ui-dialog-titlebar .ui-state-default .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_6e6e6e_256x240.png");}

.ui-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_222222_256x240.png");}