16

我试图隐藏jQuery-ui dialog的标题栏，但保持标题栏中的关闭按钮可见。我已经在 stackoverflow 上搜索了很多这样的帖子。在每篇文章中，标题栏是隐藏的，但栏所占用的空间仍然存在。我也想删除该空间，但不删除关闭按钮。

我怎样才能做到这一点？

4

4 回答 4

20

基于这个答案：

使用.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;
}

这是一个基于上述代码的演示，它使用 jQuery 添加了必要的样式。

于 2012-11-08T07:01:10.097 回答
1

如果要删除标题栏并仅使用样式保留关闭图标，请使用以下样式。它将标题栏缩小到关闭图标的大小并将其隐藏在后面。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");}
于 2013-05-09T23:23:23.137 回答
0

在我看来，你有 3 个选择。

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

任何一个都有其优缺点，如果可以的话，我会推荐#2 最好的，这里有一些关于如何使用小部件的信息http://api.jqueryui.com/jQuery.widget/

于 2012-11-08T05:45:47.860 回答
0

这是如何做到的。

转到主题文件夹-> 基础-> 打开 jquery.ui.dialog.css

寻找

关注者

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

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

同样的标题。

.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})
于 2014-04-18T09:29:06.330 回答