Question

我已经看到了这个问题的多个答案，但却找不到任何有用的答案。

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

我试过这个并没有用。这也不是一个好的解决方案。

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

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

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

我试图在这里跟随这个小提琴摆脱标题栏并保持关闭按钮。

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

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

有人可以用一个小提示来回答这个问题吗？

感谢。

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

在谷歌浏览器中，您可以通过右键单击标题栏并选择aria-labelledby来了解要使用的Inspect值。 仔细研究左侧窗格中的HTML，尝试在右侧窗格中取消选中/更改CSS值。

底部的三角形是由::after上的.ui-resizable-handle .ui-resizable-s伪元素引起的。你可以看到我试图对它进行设计，但是我会把它留给你弄清楚（或者问另一个问题）。

从jQuery对话框

1 个答案: