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

【问题标题】：jQuery UI dialog without a title bar but keep the close button没有标题栏但保留关闭按钮的 jQuery UI 对话框
【发布时间】：2012-05-31 01:40:27
【问题描述】：

我想删除 jQuery 对话框的标题栏。但我想保留关闭（十字）按钮。

我发现了这个问题：

jquery UI dialog: how to initialize without a title bar?

那里的答案解释了如何删除标题栏，但如果我这样做，它也会删除关闭按钮。还有其他链接，但它们都一样。他们只是隐藏了整个标题栏以及关闭按钮。

有什么办法可以在保持关闭按钮的同时隐藏标题栏吗？

【问题讨论】：

通过交叉按钮我假设你的意思是关闭按钮？我认为您必须删除标题栏，然后将自己的关闭按钮添加到对话框的顶角。
是的，我的意思是关闭按钮

标签： javascript jquery jquery-ui dialog

【解决方案1】：

使用它来移除 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" 
});

【讨论】：

不再工作（jquery UI 1.10.3），没有类ui-widget-header。

【解决方案2】：

这也有效

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

【讨论】：

【解决方案3】：

您可以使用上述技术删除带有关闭图标的栏，然后自己添加一个关闭图标。

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');
     });

【讨论】：

【解决方案4】：

我认为最简单和最强大的解决方案（这里的其他解决方案不适用于 1.10.3，因为他们假设事情会发生变化”）是直接为其设置您期望它具有的 CSS 样式。

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

【讨论】：

【解决方案5】：

我在这里尝试了建议更改 background-color 属性的其他解决方案，但没有帮助。我的解决方案是将background 属性更改为透明。

.ui-dialog-titlebar { background: transparent; border: 0 none; }

【讨论】：

这是答案与@kamlesh.bar 的更新相同，但它在 css 中。它将对所有对话框进行更改。如果有人想这样做，那很好。如果有人只想让特定的对话以这种方式表现，那就不好了。
@Imdad 这里的关键不是它是 CSS 的事实。那是我改变了整个背景属性。编辑背景颜色并没有在我的应用程序中产生预期的结果。