[英]jQuery UI dialog without a title bar but keep the close button
我想删除jQuery对话框的titelbar。 但我想保持关闭(交叉)按钮。
我发现了这个问题:
那里的答案解释了如何删除标题栏,但如果我这样做,它也会删除关闭按钮。 还有其他链接,但他们都做同样的事情。 他们只是隐藏整个标题栏和关闭按钮。
使用它来删除jQuery对话框的titelbar而不是关闭按钮
$(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"
});
这也有效
$(function() {
$( "#dialog" ).dialog();
$(".ui-dialog-titlebar").removeClass('ui-widget-header');
});
您可以使用上述技术的关闭图标删除栏,然后自己添加一个关闭图标。
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');
});
我认为最简单,最强大的解决方案(这里的其他解决方案不适用于1.10.3,因为它们假定可以改变的东西“)是直接为它设置的CSS样式。
$("#dialog .ui-dialog-titlebar").css({
"background-color" : "transparent",
"border" : "0px none"
});
我尝试了其他解决方案,建议更改background-color
属性,这没有帮助。 我的解决方案是将background
属性更改为透明。
.ui-dialog-titlebar { background: transparent; border: 0 none; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.