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

Question

我已经看到了这个问题的多个答案，但未能找到任何有效的答案。

如何从 jQueryUI 对话框中删除标题栏，同时保留关闭按钮。

我已经尝试过这个方法，但不起作用。这也不是一个好的解决方案。

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

我能够遵循这一点并摆脱标题栏。但这也取消了关闭按钮，并且由于没有标题栏，因此对话框不再可拖动。

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

我试图按照这里的 fiddle 来摆脱标题栏并保留关闭按钮。

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

但是，这会修改所有对话框的 CSS 并在对话框下方添加一个三 Angular 形。我希望这种情况只发生在一类对话框中，并减去底部的三 Angular 形。

有人可以用 fiddle 来回答这个问题吗？

谢谢。

Answer 1

一种解决方案可能是创建 jQueryUI 对话框的第二个实例，并在 CSS 中专门针对该实例。

jsFiddle Demo

CSS 看起来像这样:

[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;
}

在 Google Chrome 中，您可以通过右键单击标题栏并选择检查来了解要使用的 aria-labelledby 值。 仔细研究左侧 Pane 中的 HTML，尝试在右侧 Pane 中取消选中/更改 CSS 值。

底部的三 Angular 形是由 .ui-ressized-handle .ui-ressized-s 上的 ::after 伪元素引起的。你可以看到我正在尝试设计它的样式，但我会把它留给你去弄清楚(或问另一个SO问题)。