jQuery UI對話框沒有標題欄但保留關閉按鈕

Question

我想刪除jQuery對話框的titelbar。 但我想保持關閉（交叉）按鈕。

我發現了這個問題：

jquery UI對話框：如何在沒有標題欄的情況下初始化？

那里的答案解釋了如何刪除標題欄，但如果我這樣做，它也會刪除關閉按鈕。 還有其他鏈接，但他們都做同樣的事情。 他們只是隱藏整個標題欄和關閉按鈕。

是否有任何解決方案隱藏標題欄同時保持關閉按鈕？

Answer 1

使用它來刪除jQuery對話框的titelbar而不是關閉按鈕

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

Answer 2

這也有效

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

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

Answer 4

我認為最簡單，最強大的解決方案（這里的其他解決方案不適用於1.10.3，因為它們假定可以改變的東西“）是直接為它設置的CSS樣式。

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

Answer 5

我嘗試了其他解決方案，建議更改background-color屬性，這沒有幫助。 我的解決方案是將background屬性更改為透明。

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