12

我想删除 jQuery 对话框的标题栏。但我想将关闭（交叉）按钮保留在那里。

我发现了这个问题：

jquery UI 对话框：如何在没有标题栏的情况下进行初始化？

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

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

4

5 回答 5

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" 
});
于 2012-08-19T07:21:47.687 回答
3

这也有效

$(function() {
$( "#dialog" ).dialog();
$(".ui-dialog-titlebar").removeClass('ui-widget-header');
});
于 2013-02-25T10:52:13.930 回答
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');
     });
于 2013-02-28T15:28:36.717 回答
0

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

$("#dialog .ui-dialog-titlebar").css({ 
     "background-color" : "transparent", 
     "border" : "0px none" 
});
于 2014-04-08T09:30:34.493 回答
0

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

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

于 2017-07-31T20:39:03.480 回答