我已经看到了这个问题的多个答案,但未能找到任何有效的答案。
如何从 jQueryUI 对话框中删除标题栏,同时保留关闭按钮。
我已经尝试过这个方法,但不起作用。这也不是一个好的解决方案。
$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();
我能够遵循这一点并摆脱标题栏。但这也取消了关闭按钮,并且由于没有标题栏,因此对话框不再可拖动。
jquery UI dialog: how to initialize without a title bar?
我试图按照这里的 fiddle 来摆脱标题栏并保留关闭按钮。
但是,这会修改所有对话框的 CSS 并在对话框下方添加一个三 Angular 形。我希望这种情况只发生在一类对话框中,并减去底部的三 Angular 形。
有人可以用 fiddle 来回答这个问题吗?
谢谢。
最佳答案
一种解决方案可能是创建 jQueryUI 对话框的第二个实例,并在 CSS 中专门针对该实例。
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问题)。
关于javascript - 从 jQuery 对话框中删除没有十字按钮的标题栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38039592/