將jQuery對話框與標籤結合時的高度問題

Question

當您使用jQuery dialog()時，您會在屏幕上獲得完美居中的彈出窗口。當我在對話框中引入tabs()時，框頂部和瀏覽器窗口頂部之間的垂直距離小於瀏覽器底部彈出框底部的垂直距離。

我不想將高度變量添加到dialog()，因爲我希望它根據內容自動縮放。

$(function() { 
 
    $("#dialog").dialog({ 
 
    width: 409, 
 
    }); 
 
}); 
 

 
$(function() { 
 
    $("#tabs").tabs(); 
 
});

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<div id="dialog" title="Popup"> 
 
    <div id="tabs"> 
 
    <ul> 
 
     <li><a href="#fragment-1">Tab 1</a> 
 
     </li> 
 
     <li><a href="#fragment-2">Tab 2</a> 
 
     </li> 
 
    </ul> 
 
    <div id="fragment-1"> 
 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
    </div> 
 
    <div id="fragment-2"> 
 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
 
     lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
 
     ipsum lorem ipsum lorem ipsum 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

您遇到的問題是，因爲tabs正在後的dialog初始化，一些標籤CSS規則的重寫CSS規則的對話和移動它的顯示。

解決這個問題的最簡單的方法是將兩個您的對話框和標籤初始化移動到同一文檔準備調用，只是初始化標籤之前，你的對話框：

$(function() { 
    $("#tabs").tabs(); 
    $("#dialog").dialog({ 
     width: 409, 
    }); 
}); 

更復雜的方式來解決這個會要確定哪些css規則有衝突並糾正它們。或者，如果無法更改順序，只需將標籤初始化後的對話框移至屏幕中央即可。