html - ポップオーバーで jQuery UI ダイアログを展開する

Question

さまざまなデータで満たされた jQuery UI ダイアログにテーブルがあります。リンク「Select Code...」をクリックすると、Twitter Bootstrap ポップオーバーが表示されます。問題は、ポップオーバーが表示されたときに、大きすぎて jQuery UI ダイアログの境界内に収まらないことです (画像を参照)。スクロールバーが表示され、スクロールして残りを表示できますが、ダイアログを動的に展開してポップオーバー全体を表示するにはどうすればよいか疑問に思っています。次に、ポップオーバーが削除されたら、リンクを再度クリックして、ダイアログのサイズを元の高さに戻したいと思います。

これWork Ordersは jQuery UI ダイアログです。通常の HTML ページの上にあります。はSelect a code for this Work OrderTwitter Bootstrap のポップオーバーです。したがって、以下の画像は、HTML ページの上部にある 1 つのダイアログの上に 1 つのポップオーバーを示しています。

問題を単純に jsFiddle で再現したものを次に示します。 http://jsfiddle.net/AaronSalazar/aa7Jr/

$("#workOrdersModal").dialog({ 
    title: "Work Orders", 
    width: 1000, 
    closeOnEscape: false, 
    draggable: true, 
    resizable: true, 
    modal: true, 
    autoOpen: false 
});