javascript 没有标题栏但保留关闭按钮的 jQuery UI 对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10738043/
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
jQuery UI dialog without a title bar but keep the close button
提问by Imdad
I want to remove the titelbar of the jQuery dialog. But I want to keep the close (cross) button there.
我想删除 jQuery 对话框的标题栏。但我想将关闭（交叉）按钮保留在那里。
I found this question:
我发现了这个问题：
jquery UI dialog: how to initialize without a title bar?
jquery UI 对话框：如何在没有标题栏的情况下进行初始化？
The answers there explains how to remove titlebar, but if I do that it also removes the close button. There are other links too but they all do the same. They just hide the whole titlebar along with the close button.
那里的答案解释了如何删除标题栏，但如果我这样做，它也会删除关闭按钮。还有其他链接，但它们都做同样的事情。他们只是隐藏整个标题栏和关闭按钮。
Is there any solution that hides the title bar while keeping the close button?
是否有任何解决方案可以在保持关闭按钮的同时隐藏标题栏？
采纳答案by kamlesh.bar
Use this to remove the titelbar of the jQuery dialog and not the close button
使用它来删除 jQuery 对话框的标题栏而不是关闭按钮
$(function() {
$( "#dialog" ).dialog();
$("#ui-dialog-title-dialog").hide();
$(".ui-dialog-titlebar").removeClass('ui-widget-header');
});
for newer version jquery UI > 1.10.3
对于较新版本的 jquery UI > 1.10.3
$("#dialog .ui-dialog-titlebar").css({
"background-color" : "transparent",
"border" : "0px none"
});
回答by gakuru
This works too
这也有效
$(function() {
$( "#dialog" ).dialog();
$(".ui-dialog-titlebar").removeClass('ui-widget-header');
});
回答by Jacob
You could remove the bar with the close icon with the techinques described above and then add a close icon yourself.
您可以使用上述技术删除带有关闭图标的栏，然后自己添加关闭图标。
CSS:
CSS：
.CloseButton {
background: url('../icons/close-button.png');
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}
HTML:
HTML：
var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";
//append this div to the div holding your content
//将此div附加到包含您的内容的div
JS:
JS：
$(closeDiv).click(function () {
$("yourDialogContent").dialog('close');
});
回答by TMS
I think the easiest and most robust solution (the other ones here do not work for 1.10.3 since they assume things that can change") is to directly set the CSS style for it that you expect it to have.
我认为最简单和最健壮的解决方案（这里的其他解决方案不适用于 1.10.3，因为他们假设事情可以改变”）是直接为其设置您期望它具有的 CSS 样式。
$("#dialog .ui-dialog-titlebar").css({
"background-color" : "transparent",
"border" : "0px none"
});
回答by Dwayne Love
I tried the other solutions here that suggested changing the background-colorattribute and that did not help. The solution for me was changing the backgroundattribute to transparent.
我在这里尝试了其他建议更改background-color属性的解决方案，但没有帮助。我的解决方案是将background属性更改为透明。
.ui-dialog-titlebar {
background: transparent;
border: 0 none;
}
.ui-dialog-titlebar {
background: transparent;
border: 0 none;
}
