javascript 从 jQueryUI 对话框中删除标题栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12901102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing the title bar from jQueryUI Dialog?
提问by Alnitak
How can I remove the title bar.
如何删除标题栏。
I checked the API here but could not find anything.
我在这里检查了 API，但找不到任何东西。
http://api.jqueryui.com/dialog/
http://api.jqueryui.com/dialog/
I noticed that other "solutions" have a cooler looking GUI then jQuery, particularly
我注意到其他“解决方案”的 GUI 比 jQuery 更酷，尤其是
http://www.ericmmartin.com/projects/simplemodal/
http://www.ericmmartin.com/projects/simplemodal/
However I'd like to use jQueryUI b.c. of all the resources...online API documentation, tutorials, etc.
但是我想使用 jQueryUI bc 的所有资源......在线 API 文档、教程等。
I just need to know how to get rid of the title bar?
我只需要知道如何摆脱标题栏？
Thanks
谢谢
回答by jessegavin
There are a few options.
有几个选项。
Hide with CSS.ui-dialog-titlebar { display: none }
使用 CSS 隐藏.ui-dialog-titlebar { display: none }
Hide with Javascript
This will remove the title bar when the dialog is created, but it will preserve the close button.
Hide with 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();
}
})?
See demo:http://jsfiddle.net/4AuhC/52/
见演示：http : //jsfiddle.net/4AuhC/52/
回答by Maktouch
Add this CSS after jQuery UI's CSS.
在 jQuery UI 的 CSS 之后添加此 CSS。
Be careful: no more close buttons and you can't drag it anymore!
小心：没有更多的关闭按钮，你不能再拖动它了！
.ui-dialog-titlebar { display: none }
jsFiddle: http://jsfiddle.net/PeVvA/
jsFiddle：http: //jsfiddle.net/PeVvA/
If you want to keep drag and buttons, but it might not work on all themes..
如果您想保持拖动和按钮，但它可能不适用于所有主题。
.ui-dialog-titlebar { background: none; border: 0px solid black }?
jsFiddle: http://jsfiddle.net/PeVvA/1/
jsFiddle：http: //jsfiddle.net/PeVvA/1/
You could probably do more just by using CSS. I'd probably play with height.
您可能可以通过使用 CSS 来做更多事情。我可能会玩高度。
回答by Alnitak
Given elas the original element from which the dialog was created:
el作为创建对话框的原始元素给出：
$(el).siblings('.ui-dialog-titlebar').remove();
See http://jsfiddle.net/alnitak/N9TGd/
见http://jsfiddle.net/alnitak/N9TGd/
Note that actually removing the titlebar (per the question title) will also remove the close button, and break the ability to drag the dialog box!
请注意，实际删除标题栏（根据问题标题）也会删除关闭按钮，并破坏拖动对话框的能力！
回答by Sushanth --
You can try adding this to your CSS directly..
您可以尝试将其直接添加到您的 CSS 中。
.ui-dialog-titlebar
{
display: none !important;
}
回答by coder
Try this:
试试这个：
$(".ui-dialog-titlebar").hide()
(Or)
（或者）
$("#dlg").dialog({
open: function() {
$(this).dialog("widget").find(".ui-dialog-titlebar").hide();
}
});
回答by jonny
If you want to remove the titelbar and keep the close icon using styles only, use the styles below. It shrinks the title bar to the size of the close icon and hides it behind. ui-icons_6e6e6e_256x240.pngI created by lightening the ui-icons_222222_256x240.pngimage that jqueryui comes with.
如果您想删除标题栏并仅使用样式保留关闭图标，请使用以下样式。它将标题栏缩小到关闭图标的大小并将其隐藏在后面。 ui-icons_6e6e6e_256x240.png我通过ui-icons_222222_256x240.png使 jqueryui 附带的图像变亮来创建的。
.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");}
