<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/modaal.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/modaal.min.js"></script>
</head>
<section class="section">
<p class="section-title">Area 1</p>
<a href="#modal" class="modal-btn js-modal">ここをクリック</a>
<div id="modal" class="modal-content">
<p class="modal-title">ここはモーダルのなかみです</p>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div>
</section>
<section class="section">
<p class="section-title">Area 2</p>
<ul class="gallery-list">
<li><a href="https://picsum.photos/id/492/400/247/" class="gallery-list-item js-modal-gallery" data-group="modal-gallery"><img src="https://picsum.photos/id/492/400/247/" alt="" width="400" height="247"></a></li>
<li><a href="https://picsum.photos/id/74/400/247/" class="gallery-list-item js-modal-gallery" data-group="modal-gallery"><img src="https://picsum.photos/id/74/400/247/" alt="" width="400" height="247"></a></li>
<li><a href="https://picsum.photos/id/167/400/247/" class="gallery-list-item js-modal-gallery" data-group="modal-gallery"><img src="https://picsum.photos/id/167/400/247/" alt="" width="400" height="247"></a></li>
<li><a href="https://picsum.photos/id/559/400/247/" class="gallery-list-item js-modal-gallery" data-group="modal-gallery"><img src="https://picsum.photos/id/559/400/247/" alt="" width="400" height="247"></a></li>
</ul>
</section>
<section class="section">
<p class="section-title">Area 3</p>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</section>
<section class="section">
<p class="section-title">Area 4</p>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</section>
.modal-btn {
display: block;
margin: 0 auto;
color: #fff;
font-weight: bold;
background-color: #00a5a0;
box-shadow: 0 5px 0 #008480;
text-align: center;
text-decoration: none;
width: 200px;
height: 50px;
line-height: 50px;
border-radius: 60px;
&:hover {
box-shadow: none;
transform: translateY(5px);
}
}
.modal-content {
display: none;
}
.section {
padding: 30px;
background-color: #dff0ef;
&:nth-of-type(2n) {
background-color: #d9e8e7;
}
}
.section-title,
.modal-title {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.gallery-list {
display: flex;
justify-content: center;
gap: 5px;
}
.gallery-list-item {
widht: 200px;
img {
display: block;
width: 100%;
height: auto;
}
}
p {
margin: 0 0 10px;
}
$(document).ready(function() {
$(".js-modal").modaal({
overlay_close:false,//モーダル背景クリック時に閉じる
});
});
//画像
$(".js-modal-gallery").modaal({
overlay_close:false,//モーダル背景クリック時に閉じる
type: 'image'
});