如何刪除jQuery-ui對話框標題欄？

Question

我試圖隱藏jQuery-ui對話框的標題欄，但保持標題欄中的關閉按鈕可見。 我已經搜索了很多計算器后像這樣的 。 在每個帖子中，標題欄都被隱藏，但是酒吧占據的空間仍在那里。 我想刪除該空格但不刪除關閉按鈕。

我怎樣才能做到這一點？

Answer 1

根據這個答案 ：

使用.dialog("widget")選項找到對話框的div包裝器。 包裝器包含用於對話框的所有標記，包括標題，標題欄和關閉按鈕; 和對話框內容本身。 以下是調用方法並隱藏標題欄的一種方法：

$("#id").dialog({
    autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();​

然后，您可以使用CSS來消除不必要的邊距，邊框和填充。 例如：

.ui-dialog-titlebar {
    float: right;
    border: 0;
    padding: 0;
}
.ui-dialog-titlebar-close {
    top: 0;
    right: 0;
    margin: 0;
    z-index: 999;
}

這是一個基於上面代碼的演示 ，另外它使用jQuery添加了必要的樣式。

Answer 2

如果要刪除標題欄並僅使用樣式保留關閉圖標，請使用以下樣式。 它將標題欄縮小到關閉圖標的大小並將其隱藏在后面。 ui-icons_6e6e6e_256x240.png我通過減輕jqueryui附帶的ui-icons_222222_256x240.png圖像來創建。

.ui-dialog .ui-dialog-titlebar.ui-widget-header{background: none; border: none; height: 20px; width: 20px; padding: 0px; position: static; float: right; margin: 0px 2px 0px 0px;}

.ui-dialog-titlebar.ui-widget-header .ui-dialog-title{display: none;}

.ui-dialog-titlebar.ui-widget-header .ui-button{background: none; border: 1px solid #CCCCCC;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin: 0px; position: static;}

.ui-dialog .dialog.ui-dialog-content{padding: 0px 10px 10px 10px;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{position: relative; margin-top: 0px; margin-left: 0px; top: 0px; left: 0px;}

.ui-dialog .ui-dialog-titlebar .ui-state-default .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_6e6e6e_256x240.png");}

.ui-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_222222_256x240.png");}

Answer 3

我看到它的方式，你有3個選擇。

1. 是的，完全消除標題欄並添加一個自定義的標題欄以匹配默認標題欄，使用絕對定位應該是關鍵。
2. 如果你有時間，擴展（而不是覆蓋）對話框https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74的_create方法來做你做的事情需要
3. 使用CSS hackery來保持標題欄的高度為0，除了關閉按鈕之外的所有元素。

無論是哪一個都有他們的缺點和專業人士，如果可以，我會建議＃2最好，這里有一些關於如何使用小部件的信息http://api.jqueryui.com/jQuery.widget/

Answer 4

這是如何做到的。

轉到主題文件夾 - > base - >打開jquery.ui.dialog.css

找

以下

如果您不想顯示titleBar，那么只需設置display：none，就像我在下面所做的那樣。

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

Samilarly也是冠軍。

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

現在關閉按鈕你也可以設置為none或你可以設置它

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

我做了很多搜索，但沒有什么，然后我在腦海里得到了這個想法。 但是這會影響整個應用程序沒有關閉按鈕，對話框的標題欄，但你也可以通過使用jquery並通過jquery添加和設置css來克服這一點

這是這個的語法

$(".specificclass").css({display:normal})