0

I have seen multiple answers for this question but have not been able to find any that work.

How do i remove the title bar from a jQueryUI Dialog box while keeping the close button.

I have tried this and it does not work. Also it is not a good solution.

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

I was able to follow this and get rid of the title bar. But this also takes away the close button and because there is no title bar, the dialog box is not draggable anymore.

jquery UI dialog: how to initialize without a title bar?

I tried to follow this fiddle here to get rid of the title bar and keep the close button.

http://jsfiddle.net/NK2qm/2/

However, this modifies the CSS for all dialog boxes and adds a triangle below the dialog box. I want this to happen only for one class of dialog box and minus the triangle at the bottom.

Can someone reply to this question with a fiddle showing how to do it?

Thanks.

akshitBhatia
  • 1,131
  • 5
  • 12
  • 20

1 Answers1

1

One solution might be to create a second instance of the jQueryUI dialog and specifically target that instance in the CSS.

jsFiddle Demo

CSS will look like this:

[aria-labelledby=ui-id-2].ui-dialog .ui-dialog-titlebar {
    background:transparent;
    border:none;
}
[aria-labelledby=ui-id-2].ui-dialog .ui-dialog-title {
    display:none;
}

In Google Chrome, you can know which aria-labelledby value to use by right-clicking on the titlebar and choosing Inspect. Carefully study the HTML in the left-hand pane, experiment with unchecking/changing CSS values in the right-side pane.

The triangle at the bottom is caused by the ::after pseudo element on .ui-resizable-handle .ui-resizable-s. You can see I was trying to style it, but I will leave that for you to figure out (or ask another SO question).

cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • Commented out the ::before and ::after part from the fiddle. This is the solution i was looking for. http://jsfiddle.net/NK2qm/125/ – akshitBhatia Jun 26 '16 at 15:45
  • However, is there a way to leverage the dialogClass option and modify the css accordingly? I feel that is a better way to go about it. – akshitBhatia Jun 26 '16 at 15:46
  • 1
    Yes, you can do it [like this](http://jsfiddle.net/NK2qm/126/). Note that you must add a second `.option()` method to modify the already-defined configuration for the 2nd dialog. *The alternative is to have two completely separate dialog definitions, one for `$('#dialog1')` and one for `$('#dialog2')`* – cssyphus Jun 26 '16 at 16:11
  • perfect. this is what i needed. – akshitBhatia Jun 27 '16 at 07:10