[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]外周部分のクリックが効いていなかった為コードを修正しました。
本家 Azure Contrail はこちら
コメントは承認待ちです。