jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する

jQueryのモーダルウィンドウを使って、フォーム送信前の確認画面を実装します。

モーダルウィンドウとは？
モーダルウィンドウをつくるHTML
モーダルウィンドウをつくるcss
モーダルウィンドウをつくるJavaScript

js関連記事

モーダルウィンドウとは？

通常の画面の上に、画面全体を覆って表示されるウィンドウのことです。
今回は、フォームの確認ボタンを押したら、入力内容を確認させるモーダルウィンドウを作成します。

See the Pen
Untitled by むぅ (@mugenweb)
on CodePen.0

モーダルウィンドウをつくるHTML

HTML

<form action="post">
  <button type="button" id="entry_conf" class="a-btn b-blu big_btn modal-open">内容確認</button>

  <div class="modal-container">
    <div class="modal-body">
      <div class="modal-close modal-button">×</div>
      <div class="modal-content">
        <h2>送信内容の確認</h2>
        <table class="form-table small mb-1">
          <tbody>
            <tr>
              <th>お名前</th>
              <td>確認　太郎</td>
            </tr>
            <tr>
              <th>メールアドレス</th>
              <td>sample@sample.com</td>
            </tr>
            <tr>
              <th>電話番号</th>
              <td>000-0000-0000</td>
            </tr>
          </tbody>
        </table>

        <div class="d-flex space-around">
          <button type="button" class="a-btn b-grn-rv middle_btn modal-close">戻る</button>
          <button type="button" id="entry_send" class="a-btn b-blu middle_btn">送信</button>
        </div>
      </div>
    </div>
  </div>
</form>

.modal-contentの中に、送信内容を反映するtableがあります。
ただ今回は、送信内容は反映しません。

モーダルウィンドウをつくるcss

css

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 50%);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
  z-index: 999999;
}

.modal-container.active {
  opacity: 1;
  visibility: visible;
}

.modal-body {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 700px;
  width: 90%;
}

.modal-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -40px;
  right: -40px;
  width: 40px;
  height: 40px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}

.modal-content {
  background: #fff;
  text-align: left;
  padding: 30px;
  overflow: auto;
  max-height: 700px;
}

モーダルウィンドウをつくるJavaScript

JavaScript

var close = $('.modal-close'),
    container = $('.modal-container');

var error = "";
$('#entry_conf').click(function () {
  if (error != "") {
    return false;
  } else {
    container.addClass('active');
    $('#entry_send').attr("type", "submit");
    return false;
  }
});

close.on('click', function () {
  container.removeClass('active');
});

$(document).on('click', function (e) {
  if (!$(e.target).closest('.modal-body').length) {
    container.removeClass('active');
  }
});

errorに入力フォームのバリデーション結果が入り、問題なければ空のままになります。
その場合、モーダルウィンドウを開き、return false;で処理を終了します。

$('.modal-close')がクリックされたらモーダルウィンドウを閉じます。
今回はモーダルウィンドウ上部にある×と戻るボタンに指定してあり、どちらをクリックしてもモーダルウィンドウが閉じます。

最後に、画面のどこかをクリックし、その親要素に.modal-bodyがいる場合は、モーダルウィンドウを閉じます。
こうすることで、確認画面外のグレー部分をクリックするとモーダルウィンドウを閉じるようになります。