javascript - 如何删除 jQuery-ui 对话框标题栏？

Question

我想隐藏jQuery-ui dialog的标题栏，但保持标题栏中的关闭按钮可见。我在 stackoverflow 上搜索了很多帖子 like this one .在每个帖子中，标题栏都被隐藏了，但标题栏占用的空间仍然存在。我也想删除该空格但不删除关闭按钮。

我该怎么做？

Answer 1

基于 this answer :

使用.dialog("widget")用于定位对话框的 div 包装器的选项。包装器包含用于对话框的所有标记，包括标题、标题栏和关闭按钮；和对话内容本身。这是调用该方法并隐藏标题栏的一种方法:

$("#id").dialog({
    autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();​

然后您可以使用 CSS 消除不必要的边距、边框和填充。例如:

.ui-dialog-titlebar {
    float: right;
    border: 0;
    padding: 0;
}
.ui-dialog-titlebar-close {
    top: 0;
    right: 0;
    margin: 0;
    z-index: 999;
}

Here is a demo基于上面的代码加上它使用 jQuery 添加了必要的样式。