クリックでモーダル表示 + overflow:scroll;

css/コーディング

表題の通りです。ボタン等をクリックするとモーダルが表示され、もしモーダルの中身が多い場合はスクロール。のメモ。

Modalの中身

ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。
ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。
ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。

ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。

赤文字をクリックするとモーダルが開きます。黒の背景色を押すとモーダルが消えます。

     <div id="modal_open" class="bl_modalBtn">クリックしてね
       </div>
        <div class="bl_modal js-modal">
          <div class="bl_modal_bg js-modal-close"></div>
          <div class="bl_modal_cnt">
            <div class="bl_modal_wrap">
              <p class="bl_modal_ttl">Modalの中身</p>
              <div class="bl_modal_txt">ここにコンテンツが入ります。
              </div>
            </div>
          </div>
        </div>
.bl_modalBtn {
cursor: pointer;
color: red;
font-weight: bold;
}
.bl_modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
 left: 0;
  width: 100vw;
  z-index: 1000;
}

.bl_modal_bg {
  background: rgba(0, 0, 0, 0.5);
  height: 100vh;
  position: absolute;
  width: 100vw;
}

.bl_modal_cnt {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 70%;
  padding: 20px 0;
  background: #fff;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-height: 90%; /*for modal scroll*/
  overflow-y: scroll; /*for modal scroll*/
  -ms-overflow-style: none; /*ie scrollバー削除*/
}

.bl_modal_ttl {
  font-size: 2rem;
  font-family: "ff-nexus-typewriter", sans-serif;
  text-align: center;
  margin-bottom: 2rem;
}
.bl_modal_txt {
  width: 86%;
  margin-left: auto;
  margin-right: auto;
}
jQuery(function ($) {  
$('#modal_open').on('click', function () {
    $('.js-modal').fadeIn();
    return false;
  });
  $('.js-modal-close').on('click', function () {
    $('.js-modal').fadeOut();
    return false;
  });
  });

モーダルのコンテンツを囲っているdivに対して
max-height: 90%;
overflow-y: scroll;

を指定します。するとモーダルの中身が少なければスクロールしないし、中身が増えてはみ出したらy方向へスクロールできるようになります。

ieは太いスクロールバーが表示されて嫌なので、
-ms-overflow-style: none;
で非表示に。

closeボタンを作りたい場合は、closeボタンにも.js-modal-closeをつければOKです!

タイトルとURLをコピーしました