从jQuery对话框中删除没有十字按钮的标题栏

Question

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.

Answer 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).