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

【问题标题】：Remove title bar without the cross button from jQuery Dialog box从 jQuery 对话框中删除没有十字按钮的标题栏
【发布时间】：2016-06-26 14:39:05
【问题描述】：

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

如何在保留关闭按钮的同时从 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 并在对话框下方添加一个三角形。我希望这种情况只发生在一类对话框中，并减去底部的三角形。

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

谢谢。

【问题讨论】：

所以你不想要那个“我的对话”标题，对吧？
是的。不想要标题。想要关闭按钮。查看小提琴链接。实际上解决了整个问题。只是它修改了所有对话框。我们可以修改那个小提琴来解决这个问题吗？
你可以使用它的类来移除它，对吧？
检查整个问题。我试过了，但这不是我想要的。我想要标题栏附带的关闭按钮。

标签： javascript jquery jquery-ui

【解决方案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 中，您可以通过右键单击标题栏并选择 Inspect 来了解要使用哪个 aria-labelledby 值。 仔细研究左侧窗格中的 HTML，尝试在右侧窗格中取消选中/更改 CSS 值。

底部的三角形是由.ui-resizable-handle .ui-resizable-s 上的::after 伪元素引起的。您可以看到我正在尝试对其进行样式设置，但我将把它留给您自己弄清楚（或提出另一个 SO 问题）。

【讨论】：

从小提琴中注释掉 ::before 和 ::after 部分。这是我一直在寻找的解决方案。 jsfiddle.net/NK2qm/125
但是，有没有办法利用 dialogClass 选项并相应地修改 css？我觉得这是一个更好的方法。
是的，你可以做到like this。请注意，您必须添加第二个 .option() 方法来修改第二个对话框的已定义配置。 另一种方法是有两个完全独立的对话框定义，一个用于$('#dialog1')，一个用于$('#dialog2')
完美。这就是我需要的。