【JavaScript】モーダルウィンドウ実装

学習内容を備忘録としてまとめます。
モーダルウィンドウを実装しましたので、作成方法を記載します。

上記のように投稿などをモーダルウィンドウを使用して操作することができます。

#実装方法
実装方法について記載していきます。

##投稿ボタン作成
ボタンクリック時にモーダルウィンドウを出力させるため、
投稿ボタンを作成します。

header.php

    <ul>
    <li><a href="../user/user_list.php?type=all">ユーザー一覧</a></li>
    <li><a href="../post/post_index.php">投稿一覧</a></li>
    <li><a class="post_window" href="#">投稿</a></li>
    <li><a href="../message/message_top.php">メッセージ</a></li>
：
：
    </ul>

ヘッダーに投稿ボタンを追加します。
このpost_windowをクリックしたときにJavaScriptの処理が開始されるようにします。

##JavaScriptでモーダルウィンドウ出力
先ほどの投稿ボタンがクリックされたときに、モーダルウィンドウを出力するよう実装します。

user_page.js

$(document).on('click', '.post_window', function() {
    //背景をスクロールできないように　&　スクロール場所を維持
    scroll_position = $(window).scrollTop();
    $('body').addClass('fixed').css({ 'top': -scroll_position });
    // モーダルウィンドウを開く
    $('.post_process').fadeIn();
    $('.modal').fadeIn();
});

post_windowをクリックしたときに処理が走るようになっています。

    scroll_position = $(window).scrollTop();
    $('body').addClass('fixed').css({ 'top': -scroll_position });

モーダルウィンドウが出力された際に背景の画面をスクロールしないようにしています。
画面のスクロール位置を取得して、そこで位置を固定しています。

    $('.post_process').fadeIn();
    $('.modal').fadeIn();

こちらでモーダルウィンドウを出力しています。
元のモーダルウィンドウがないので作成していきます。
##モーダルウィンドウ作成

post_process.php

<div class="modal"></div>
<div class="post_process">
  <h2 class="post_title">投稿</h2>
  <form method="post" action="../post/post_add_done.php" enctype="multipart/form-data">
  <textarea class="textarea form-control" placeholder="投稿内容を入力ください" name="text"></textarea>
  <div class="post_btn">
  <button class="btn btn-outline-danger" type="submit" name="post" value="post" id="post">投稿</button>
  <button class="btn btn-outline-primary modal_close" type="button">キャンセル</button>
  </div>
  </form>
</div>

投稿ボタンをクリックするとpost_add_done.phpに処理が遷移するようになっています。
post_add_done.phpはSQL文でpostテーブルにINSERTするようになっています。
※上記のコードは説明上不要な部分を省略しているので、トップの動作画面とは違いがあります。

<div class="modal"></div>

こちらの1行は後ほど説明しますが、モーダルウィンドウが出力された際に背景を灰色にする役割を担っています。
ではこちらのモーダルウィンドウをレイアウトしていきます。

##モーダルウィンドウのレイアウト

style.css

.post_process {
    display: none;
    position: fixed;
    z-index: 15;
    top: 30%;
    left: 50%;
    width: 600px;
    padding: 10px;
    background-color: #121212;
    border-radius: 8px;
    -webkit-transform: translate(-50%, -10%);
    transform: translate(-50%, -10%);
    color: #fff;
    font-size: 1.3rem;
    border: 0.3rem solid #fff;
}

表示する位置、背景色などを決めています。
z-index: 15;で重なりの順序を高くており、
display: none;で普段は表示させないようにさせ、JavaScriptの処理で出力させるようにしています。

先ほど触れた、モーダルウィンドウ出力時の背景についてもレイアウトしていきます。

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(152, 152, 152, 0.7);
    width: 100%;
    height: 100%;
    z-index: 10;
}

こちらも位置(画面全体)、背景色を決めています。
z-index: 10;にすることで重なり順序がモーダルウィンドウよりも低く設定しています。

上記を一通り実装すれば、トップの動作画面のように動くと思います。

#参考URL
https://github.com/nyann123/snspoi