モーダルダイアログのサイズを動的に変更する方法は？

Question

私はメインページにモーダルダイアログを持っており、このダイアログにjPlayerを追加します。すべて正常に動作しますが、このダイアログではプレーヤーの一部しか表示されません。プレーヤーを挿入した後のダイアログのサイズをプレーヤーのサイズに変更する方法は？

つまり、私はこのダイアログにオーディオまたはビデオプレーヤーを挿入したい、そしてそれらは異なるサイズを持っています。

Answer 1

jQuery UIのダイアログウィジェットを使用していると思います。そうなら、あなたは（JavaScriptでそれを行うよりもパフォーマンスが向上される）CSSを経由して要素をターゲットにすることができます：

.ui-dialog { 
    width : 500px; 
    height : 150px; 
} 

あなたが複数のダイアログを持っているなら、あなたは少し上のCSSセレクタは、よりユニークにする必要があります。

#root-element .ui-dialog { 
    width : 500px; 
    height : 150px; 
} 

また、この行はエラーをスローする必要があります。

.attr("id", $(this) 

そして、このようなものに変更する必要があります。

.attr("id", $(this).attr('id') + '_dialog') 

ダイアログに、クリックして作成するボタンと同じIDを最後に追加します（_dialog）。

UPDATE

あなたは、あなたが必要に応じて、要素の大きさを変更するjQueryの.css()機能を使用することができますはJavaScript（リンクがクリックされた後に言う）を介してこれを行うにはしたくない場合は、次の

$('#some-link').bind('click', function() { 
    $('.ui-dialog').css({ 
     width : 500px, 
     height : 150px 
    }); 
}); 

使用する高さ/幅の値がわからない場合は、ダイアログコンテンツの値を確認できます。

$('#some-link').bind('click', function() { 
    var $dialog = $('.ui-dialog'); 
    $dialog.append('<div class="audio" style="width:123px; height: 321px;"></div>'); 
    $dialog.css({ 
     width : $dialog.children('.audio').width(),//note that pixels will be assumed so it is not necessary to specify `px` 
     height : $dialog.children('.audio').height() 
    }); 
}); 

Answer 2

dialog()

例を呼び出す前に、あなたの$("<div></div>")コンテナにデータをロード：

var $dialogContent = $("<div></div>"); 

$dialogContent.load("some href", function() { 
    // Initialize dialog in callback after the data has been loaded. 
    $dialogContent.dialog(options); 
});