表題の通りです。ボタン等をクリックするとモーダルが表示され、もしモーダルの中身が多い場合はスクロール。のメモ。
クリックしてね
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です!