Question

如何删除标题栏。

我在这里检查了API但找不到任何内容。

http://api.jqueryui.com/dialog/

我注意到其他“解决方案”有一个比jQuery更酷的GUI，特别是

http://www.ericmmartin.com/projects/simplemodal/

但是我想使用jQueryUI b.c.所有资源......在线API文档，教程等

我只需要知道如何摆脱标题栏？

由于

Answer 1

有几个选择。

隐藏CSS
.ui-dialog-titlebar { display: none }

使用Javascript隐藏
这将在创建对话框时删除标题栏，但它将保留关闭按钮。

$("div").dialog({
  create: function( event, ui ) {
      var dialog = $(this).closest(".ui-dialog");
      dialog.find(".ui-dialog-titlebar-close")
            .appendTo(dialog)
            .css({
              position: "absolute",
              top: 0,
              right: 0,
              margin: "3px"
            });
      dialog.find(".ui-dialog-titlebar").remove();
  }
})

参见演示： http://jsfiddle.net/4AuhC/52/

Answer 2

将el作为创建对话框的原始元素：

$(el).siblings('.ui-dialog-titlebar').remove();

请参阅http://jsfiddle.net/alnitak/N9TGd/

请注意，实际删除标题栏（根据问题标题）也会删除关闭按钮，并打破拖动对话框的功能！

Answer 3

在jQuery UI的CSS之后添加此CSS。

小心：没有更多的关闭按钮，你不能再拖动它了！

.ui-dialog-titlebar { display: none }

jsFiddle：http://jsfiddle.net/PeVvA/

如果你想保持拖动和按钮，但它可能不适用于所有主题..

.ui-dialog-titlebar { background: none; border: 0px solid black }

jsFiddle：http://jsfiddle.net/PeVvA/1/

你可以通过使用CSS做更多事情。我可能会玩高度。

Answer 4

您可以尝试直接将其添加到CSS中。

.ui-dialog-titlebar
{ 
   display: none !important;
}

Answer 5

试试这个：

$(".ui-dialog-titlebar").hide()

（OR）

$("#dlg").dialog({
  open: function() {
    $(this).dialog("widget").find(".ui-dialog-titlebar").hide();
  }
});

Answer 6

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

从jQueryUI对话框中删除标题栏？

6 个答案: