[jQuery] jQueryで半自力で作るダイアログボックス
最近個人的にウェブ関連に比重が移りつつあるので、勉強半分で記事を追加しています。
自作のダイアログボックスを表示するサンプルです。
汎用性もあり、かつ、分かりづらくならない程度の方法で実装してみます。
1、HTML内に非表示のダイアログボックスを配置
ダイアログボックスをブロック要素で予めHTML内に作っておいてidを設定し、それをCSSの display:none; で非表示にしておきます。
尚、ダイアログボックスの各パーツのcssには position: absolute; を設定して要素を浮かせておきます。
例: [ self_making_dialog.html]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQueryで半自力で作るダイアログボックス</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript" src="set_self_making_dialog.js"></script> <style> #dialog { position: absolute; display: none; /* 非表示化しておく */ } #dialog .curtain { z-index: 1000; position: absolute; background: #111; } #dialog .container { z-index: 1001; position: absolute; width: 500px; height: 400px; /* アニメーションの都合でサイズを此方に設定 */ } #dialog .dialog_main { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; /* 此方には100%を仮設定 */ text-align: center; box-sizing: border-box; border: 2px solid #fa3; border-radius: 10px; background: #fff; } #dialog .diarog_contents { height: 70%; } #dialog .diarog_contents p{ padding-top: 15%; font-size: 2rem; } </style> </head> <body> <h2>オリジナルダイアログを表示</h2> <button type="button" id="dialog_open_button">ダイアログオープン</button> <!-- ここからダイアログ --> <div id="dialog"> <!-- 幕用div --> <div class="curtain"></div> <!-- ダイアログ本体 --> <div class="container"> <div class="dialog_main"> <h3>ランダムに文字を表示</h3> <div class="diarog_contents"> <p class="random_text"><!-- ここに文字が入ります --></p> </div> <button type="button" class="dialog_close_button">閉じる</button> </div> </div> </div> <!-- ダイアログここまで --> </body> </html>
2、ダイアログボックスの表示、非表示をスクリプトで制御
スクリプトで、ダイアログの要素(背面の幕のサイズ調整など)の調整、及び、ダイアログの呼び出し部分を関数化しておきます。
尚、アニメーションの都合からサイズの設定をスクリプトの方でしています。
今回はサンプル的に表示用のトリガー(.click())も合わせて設定します。
例: [ set_self_making_dialog.js ]
// ダイアログのサイズを設定 var dialog_size = {'width':500, 'height':400}; var dialog_animestart_size = {'width':400, 'height':320}; // ランダム文字の設定 var randomtext = ['大吉','吉','中吉','小吉','末吉','凶']; $(function(){ // ダイアログパーツの初期状態を設定 $('#dialog .curtain').css({ opacity:0 }); $('#dialog .dialog_main').css({ width:dialog_animestart_size.width, height:dialog_animestart_size.height, opacity:0 }); // id="dialog_open_button"に表示用のclick()を設定 $('#dialog_open_button').click(function(){ DialogOpen(); }); // id="dialog_close_button"に非表示用のclick()を設定 $('#dialog .dialog_close_button').click(function(){ DialogClose(); }); // 幕にも非表示用のclick()を設定 $('#dialog .curtain').click(function(){ DialogClose(); }); }); function DialogOpen() { // テキストの内容をランダム設定 $('#dialog .random_text').text( randomtext[Math.floor(Math.random() * randomtext.length)] ); // dialogの原点をドキュメント左上に移動 $('#dialog').offset({top: 0, left: 0}); // 要素全体および画面のサイズを取得 var document_size = { 'width' : $(document).width(), 'height' : $(document).height() }; var window_size = { 'width' : $(window).width(), 'height' : $(window).height() }; var curtain_size = []; // 大きい方を選択 if ( window_size.width < document_size.width ) { curtain_size.width = document_size.width; } else { curtain_size.width = window_size.width; } if ( window_size.height < document_size.height ) { curtain_size.height = document_size.height; } else { curtain_size.height = window_size.height; } // ダイアログ全体と幕のサイズを設定 $('#dialog').width( curtain_size.width ); $('#dialog').height( curtain_size.height ); $('#dialog .curtain').width( curtain_size.width ); $('#dialog .curtain').height( curtain_size.height ); // ダイアログを表示 $('#dialog').show(); // dialog_main格納用コンテナを画面中央に移動(hide()時に値が取れない場合があるのでここで) var _offset_top = ((window_size.height - dialog_size.height) / 2) + $(window).scrollTop(); var _offset_left = ((window_size.width - dialog_size.width) / 2) + $(window).scrollLeft(); $('#dialog .container').offset({top: _offset_top, left: _offset_left}); // 各アニメーションを設定 $('#dialog .curtain').animate({ opacity:0.8 }, 'normal', 'swing'); $('#dialog .dialog_main').animate( { width: dialog_size.width, height: dialog_size.height, opacity:1 }, 'normal', 'swing'); } function DialogClose() { // ダイアログを閉じる $('#dialog .curtain').animate({ opacity:0 }, 'normal', 'swing'); $('#dialog .dialog_main').animate( { width:dialog_animestart_size.width, height:dialog_animestart_size.height, opacity:0 }, 'normal', 'swing', function() { // アニメーション終了時に非表示化 $('#dialog').hide(); }); }
上記サンプル「jQueryで半自力で作るダイアログボックス」
余談
今回ダイアログの中身の部分は適当に設定しています。
(いきなり凶が出たらすみません)
初めに自分が自作ダイアログ作ったのは、昔某ネットカードゲームの引継ぎ案件で、元々入ってたダイアログが何か中央からずれる&追加仕様の対応が難しい、という状態で、いっそのこと作ったのがたしかきっかけだったと思います。(その後スマホ版ページにも実装)
昨今html5.2などでモーダルダイアログが標準実装されたりする流がありますが、jQueryで作っとけば少なくともjQueryの対応バージョンのブラウザなら動きそうなので。
自分で表示の枠を組めば、表示する内容も思い通りになりますし。
ちなみにjQueryプラグインのダイアログなんかは、JS内で全部生成してたりするのではないかと思います。
あと、ダイアログ部分をphpにまとめて、jQueryのload()関数で取ってくる処理も考えられそうです。
※[2018/11/17 20:20 及び 11/18 1:38]コードに一部問題があった為修正しました。
※[2018/10/12 18:50]外周部分のクリックが効いていなかった為コードを修正しました。
コメントはありません。