2018年10月12日 : HTML&CSS, jQuery

[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]外周部分のクリックが効いていなかった為コードを修正しました。
 

この記事へのコメント

コメントはありません。

コメントを書き込む

※タグは使えません。※メールアドレスは公開されません(記録はされます)。
※初書き込みの場合は承認されるまで表示されません。
※内容によって管理人判断で非承認・非表示化する場合があります。ご了承ください。

18 − 3 =