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

Question

我想移除jQuery对话框的标题栏，但我想保留关闭（叉）按钮。

我找到了这个问题：

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

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

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

- Imdad

---

通过交叉按钮，我想您是指关闭按钮？我认为您需要移除标题栏，然后在对话框的顶部角落添加自己的关闭按钮。 - DisplayName

是的，我指的是关闭按钮。 - Imdad

Answer 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" 
});

- kamlesh.bar

---

不再起作用了（jquery UI 1.10.3），没有ui-widget-header类。 - Tomas

Answer 2

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

- gakuru

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

- Jacob

Answer 4

我认为最简单和最健壮的解决方案（其他方案在1.10.3版本中无法工作，因为它们假定可以更改的内容）是直接设置所期望的CSS样式。

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

- Tomas

Answer 5

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

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

- Dwayne Love

---

这个答案与@kamlesh.bar的更新相同，但是它是在CSS中。它将更改所有对话框。如果有人想要这样做，那么很好。如果有人只想让特定的对话框以这种方式运行，那么这不是一个好方法。 - Imdad

@Imdad，这里关键的不是它是CSS，而是我改变了整个背景属性。编辑背景颜色在我的应用程序中没有产生预期的结果。 - Dwayne Love