【jQuery】シンプルでカスタマイズしやすいモーダルウィンドウを作ってみた

Webコンテンツ制作でよくあるモーダルウィンドウ実装。
ちょっと検索すればjQueryプラグインがすぐに見つかるかと思いますが、クライアントの要望に合ったものにカスタマイズするのは意外と時間がかかることが多いものです。

なので今回は、カスタマイズや他案件への流用がしやすいように、プラグインなどを使用せず1から作成してみました。

モーダル内のスクロール、同一ページに複数のモーダル実装が可能になってます。

表示サンプル

サンプルページは下記URLよりどうぞ。
下の方でも書いてますが、data-targetとモーダル本体のidが連動しているので複数のモーダルに対応しています。

サンプルHTML

モーダルのサンプル

作ったもの

  • モーダル部分のHTML
  • JavaScript(jQuery)
  • CSS

モーダル部分のHTML

<a href="javascript:void()" data-target="modal-01" class="js-modal-open">モーダルを開く</a>
<div id="modal-01" class="modal js-modal">
  <div class="modal-bg js-modal-close"></div>
  <div class="modal-content">
    <div class="modal-inner">
    モーダルの中身です。
    </div>
    <a href="javascript:void()" class="js-modal-close btn_close">×</a>
  </div>
</div>

【説明】

  • .js-modal-openをクリックでモーダルが開きます。
  • .js-modal-closeをクリックでモーダルが閉じます。
    上の例では閉じるボタンの他に背景部分をクリックしても閉じるようにしています。
  • 「モーダルを開く」のdata-targetとモーダル本体のidが連動していて、複数のモーダルに対応しています。

JavaScript(jQuery)

$(function(){
  var modal_open  = $('.js-modal-open');
  var modal_close = $('.js-modal-close');

  modal_open.on('click', function(){
    var target = $(this).data('target');
    var modal  = document.getElementById(target);
    $(modal).fadeIn();
    $('html, body').css('overflow-y', 'hidden');
    return false;
  });

  modal_close.on('click', function(){
    $('.js-modal').fadeOut();
    $('html, body').css('overflow-y', 'auto');
    return false;
  });
});

【説明】

  • 変数modal_openmodal_closeにモーダルを開く・閉じるで使用するクラスを代入しています。
    ここではそれぞれ.js-modal-open.js-modal-closeとしています。
  • クラス名の接頭辞にjs-とあるのは、JavaScriptでのみ使用することを明示するためで、原則としてCSSでのスタイリングはしません。
  • モーダルを開いた際にhtmlbodyoverflow-y: hiddenを追加することでページがスクロールしないようにしています。
  • モーダルを閉じた時overflow-y: autoに変更しています。

CSS

/* Modal Base */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 100;
}
.modal-bg {
  position: absolute;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 101;
}

/* Modal Content */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  z-index: 102;
}
@media screen and (max-width: 640px) {
  .modal-content {
    width: 80vw;
  }
}
.modal-inner {
  position: relative;
  background: white;
  width: 100%;
  min-height: 100px;
  max-height: 500px;
  padding: 30px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Close Button */
.btn_close {
  display: block;
  position: absolute;
  top: -50px;
  right: 0;
  background-color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: black;
  text-align: center;
  font-size: 30px;
  text-decoration: none;
  line-height: 35px;
  z-index: 105;
}

【説明】

  • .modal.modal-bgbackground-color以外触らなくて良いです。
  • modal-contentpositiontoplefttransformでモーダルの表示位置を天地左右中央に設定していますので、ここも触らなくて良いです。
  • コンテンツの量によってモーダル内でスクロールできるようにしています。
    .modal-innermin-heightmax-heightで調節します。
  • .modal-contentwidthで横幅を調節します。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする