jQuery ダイアログの大きさを指定するサンプル
環境
jquery 3.6.3
jqueryui 1.12.1
Google Chrome 110.0.5481.104(Official Build) (64 ビット)
構文
ダイアログを表示します
$(“#セレクターID名").dialog({
modal:true, //モーダル表示
title:"タイトルの内容",
width:数値, //ダイアログの横幅(px)
height:数値, //ダイアログの縦幅(px)
buttons:{
“キャンセル":function(){処理コード}
}
})
使用例
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script> $(document).ready(function(){ $("#show").click(function() { $("#name").dialog({ modal:true, //モーダル表示 title:"テストダイアログ", //タイトル width:250, //ダイアログの横幅(px) height:250, //ダイアログの縦幅(px) buttons: { //ボタン "キャンセル": function() { $(this).dialog("close"); } } }); }); }); </script> </head> <body> <div id="name" style="display:none;">aaaaa </div> <input type="button" id="show" value="テスト" /> </body> </html>
実行結果
「テスト」ボタンを押すと縦と横が150pxのダイアログが表示されます。