Removing the title bar from jQueryUI Dialog?

javascript jquery jquery-ui simplemodal
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/

Related questions

jQuery UI DatePicker to show month year only

I am using jQuery date picker to display the calendar all over my app. I want to know if I can use it to display the month and year (May 2010) and not the calendar?

Read More
Calling a function on bootstrap modal open

I used to use JQuery UI's dialog, and it had the open option, where you can specify some Javascript code to execute once the dialog is opened. I would have used that option to select the text within the dialog …

Read More
How to change date format (MM/DD/YY) to (YYYY-MM-DD) in date picker

I have following datepicker script: <script> $(function(){ $("#to").datepicker(); $("#from").datepicker().bind("change",function(){ var minValue = $(this).val(); minValue = $.datepicker.parseDate("mm/dd/yy", minValue); minValue.setDate(minValue.getDate()+1); $("#to").datepicker( "option", "minDate", minValue ); }) }); </script> Now …

Read More