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添加必要的样式。

Answer 2

如果要删除标题栏并仅使用样式保留关闭图标，请使用以下样式。它将标题栏缩小到关闭图标的大小并将其隐藏在后面。 ui-icons_6e6e6e_256x240.png我是通过照亮jqueryui附带的ui-icons_222222_256x240.png图像创建的。

.ui-dialog .ui-dialog-titlebar.ui-widget-header{background: none; border: none; height: 20px; width: 20px; padding: 0px; position: static; float: right; margin: 0px 2px 0px 0px;}

.ui-dialog-titlebar.ui-widget-header .ui-dialog-title{display: none;}

.ui-dialog-titlebar.ui-widget-header .ui-button{background: none; border: 1px solid #CCCCCC;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin: 0px; position: static;}

.ui-dialog .dialog.ui-dialog-content{padding: 0px 10px 10px 10px;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{position: relative; margin-top: 0px; margin-left: 0px; top: 0px; left: 0px;}

.ui-dialog .ui-dialog-titlebar .ui-state-default .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_6e6e6e_256x240.png");}

.ui-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_222222_256x240.png");}

Answer 3

我看到它的方式，你有3个选择。

是的，完全删除标题栏并添加一个自定义的标题栏以匹配默认标题栏，使用绝对定位应该是关键。
如果您有时间，请扩展（而不是覆盖）对话框https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74的_create方法以执行您需要的操作
使用CSS hackery将标题栏保留在所有元素的高度为0但关闭按钮。

任何一方都有自己的缺点和优点，如果可以，我会建议＃2最好，这里有一些关于如何使用小工具的信息http://api.jqueryui.com/jQuery.widget/

Answer 4

这是怎么做的。

转到主题文件夹 - ＆gt;基 - ＆GT;打开jquery.ui.dialog.css

查找

追随中

如果您不想显示titleBar，那么只需设置display：none，就像我在下面所做的那样。

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

Samilarly也是如此。

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

现在关闭按钮你也可以设置为无或你可以设置它

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

我做了很多搜索，但没有什么，然后我在脑海里得到了这个想法。但是这会影响整个应用程序没有关闭按钮，对话框的标题栏，但你也可以通过使用jquery并通过jquery添加和设置css来克服这个问题

这是

的语法

$(".specificclass").css({display:normal})

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

4 个答案: