CODEWITHSUNDEEP
javascriptjqueryjquery-uisimplemodal
user656925
user656925

Reputation:

Removing the title bar from jQueryUI Dialog?

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

Upvotes: 3

Views: 12113

Answers (6)

jessegavin
jessegavin

Reputation: 75650

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/

Upvotes: 9

jonny
jonny

Reputation: 11

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");}

Upvotes: 0

Alnitak
Alnitak

Reputation: 339796

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!

Upvotes: 5

Maktouch
Maktouch

Reputation: 3247

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.

Upvotes: 5

coder
coder

Reputation: 13250

Try this:

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

(Or)

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

Upvotes: 2

Sushanth --
Sushanth --

Reputation: 55740

You can try adding this to your CSS directly..

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

Upvotes: 3

Related Questions