サンプルソース
ダイアログとダイアログを開くボタン
ダイアログとダイアログを開くボタンを用意
ダイアログ内にはテキストエリアを設置
|
1 2 3 4 5 6 7 |
<!-- ダイアログ --> <div id="dialog" style="display: none;"> <p>備考</p> <input type="text" id="memo" value="" /> </div> <!-- ダイアログを開くボタン --> <input type="button" id="btnOpenDiaolog" value="ダイアログを開く" /> |
ダイアログの初期化
「ダイアログを開く」ボタンをクリック
モーダルダイアログが表示されるように設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//初期処理 $(function() { //ダイアログを開くボタンをクリックした際の処理 $("#btnOpenDiaolog").click(function() { //ダイアログ内のテキストボックスに文字列を設定 document.getElementById("memo").value = "備考だよ！"; //ダイアログの設定 $("#dialog").dialog({ modal : true, //モーダル表示 title : "テストダイアログ", //タイトル buttons : { //ボタン "確認" : function() { $(this).dialog("close"); } } }); }); }); |
jQueryの読み込み
jQueryの読み込みは次のように宣言
|
1 2 3 4 5 6 |
<script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery-ui.js"></script> <script src="js/jquery-ui.min.js"></script> <link rel="stylesheet" href="css/jquery-ui.css"> <link rel="stylesheet" href="css/jquery-ui.min.css"> <link rel="stylesheet" href="css/jquery-ui.theme.min.css"> |
実行結果の確認
デモページで、実際の動きを確認できます
初心者向けおすすめ書籍をご紹介！
jQueryの基本的なところから学びたい人向け
リンク
プログラミングを学んだけど、実際Webシステムで
どうやって開発するの？という方向けの書籍です
どうやって開発するの？という方向けの書籍です
リンク
コメント