jQuery UI 对话 框 没有 标题 栏 , 但 保留 关闭 按钮

zazmityj  于 2022-11-22  发布在  jQuery
关注(0)|答案(5)|浏览(94)

我想删除jQuery对话框的标题栏,但是我想保留关闭(叉号)按钮。
我发现了这个问题:
jquery UI dialog: how to initialize without a title bar?
这里的答案解释了如何删除标题栏,但是如果我这样做的话,它也会删除关闭按钮。还有其他的链接,但是它们都是这样做的。它们只是隐藏了整个标题栏沿着关闭按钮。

是否有任何解决方案可以在保留关闭按钮的同时隐藏标题栏?

au9on6nz

au9on6nz1#

使用此命令删除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" 
});
dwthyt8l

dwthyt8l2#

$(function() {
    $( "#dialog" ).dialog();
    $(".ui-dialog-titlebar").removeClass('ui-widget-header');
});
rjee0c15

rjee0c153#

你 可以 用 上面 描述 的 技术 删除 带有 关闭 图标 的 栏 , 然后 自己 添加 一 个 关闭 图标 。
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;
}

中 的 每 一 个
于 飞 :

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

格式
//将 此 div 附加 到 保存 内容 的 div
JS :

$(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });

格式

3phpmpom

3phpmpom4#

我认为最简单和最健壮的解决方案(这里的其他解决方案不适用于1.10.3,因为它们假设可以更改的东西”)是直接为它设置您希望它具有的CSS样式。

$("#dialog .ui-dialog-titlebar").css({ 
     "background-color" : "transparent", 
     "border" : "0px none" 
});
4ktjp1zp

4ktjp1zp5#

我尝试了这里建议更改background-color属性的其他解决方案,但没有帮助。对我来说,解决方案是将background属性更改为透明。
.ui-dialog-titlebar { background: transparent; border: 0 none; }

相关问题