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

时间:2012-05-24 13:03:41

标签: javascript jquery jquery-ui dialog

我想删除jQuery对话框的标题栏。但是我想在那里保持关闭(交叉)按钮。

我发现了这个问题:

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

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

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

5 个答案:

答案 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; }