我想删除jQuery对话框的标题栏。但是我想在那里保持关闭(交叉)按钮。
我发现了这个问题:
jquery UI dialog: how to initialize without a title bar?
那里的答案解释了如何删除标题栏,但如果我这样做,它也会删除关闭按钮。还有其他链接,但他们都做同样的事情。他们只是隐藏整个标题栏和关闭按钮。
答案 0 :(得分:5)
使用此选项删除jQuery对话框的标题栏,而不是关闭按钮
$(function() {
$( "#dialog" ).dialog();
$("#ui-dialog-title-dialog").hide();
$(".ui-dialog-titlebar").removeClass('ui-widget-header');
});
对于较新版本的jquery UI> 1.10.3
$("#dialog .ui-dialog-titlebar").css({
"background-color" : "transparent",
"border" : "0px none"
});
答案 1 :(得分:2)
这也有效
$(function() {
$( "#dialog" ).dialog();
$(".ui-dialog-titlebar").removeClass('ui-widget-header');
});
答案 2 :(得分:2)
您可以使用带有上述技术的关闭图标删除栏,然后自行添加关闭图标。
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:
var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";
//将此div附加到包含您内容的div
JS:
$(closeDiv).click(function () {
$("yourDialogContent").dialog('close');
});
答案 3 :(得分:0)
我认为最简单,最强大的解决方案(这里的其他解决方案不适用于1.10.3,因为它们假设可以改变的东西")是直接设置它所期望的CSS样式。
$("#dialog .ui-dialog-titlebar").css({
"background-color" : "transparent",
"border" : "0px none"
});
答案 4 :(得分:0)
我在这里尝试了其他解决方案,建议更改background-color
属性并且没有帮助。我的解决方案是将background
属性更改为透明。
.ui-dialog-titlebar {
background: transparent;
border: 0 none;
}