<div class="layout modal">
<div class="modal__cards">
<!-- モーダルウィンドウを開くカード -->
<div class="modal__card card">
<div class="card__picture">
<img src="https://soya-blog.com/wp-content/themes/soya-blog/assets/images/jquery/modal/modal-picture-01.png" alt="森と湖">
</div>
<div class="card__main">
<h2 class="card__title">森の中にある湖</h2>
<p class="card__text">これは東北の山奥にある静寂に包まれた森の中の美しい湖です。自然のエネルギーを感じるのには最適な場所です。</p>
</div>
</div>
<!-- モーダルウィンドウを開くカード -->
<div class="modal__card card">
<div class="card__picture">
<img src="https://soya-blog.com/wp-content/themes/soya-blog/assets/images/jquery/modal/modal-picture-02.png" alt="砂漠">
</div>
<div class="card__main">
<h2 class="card__title">アフリカの砂漠</h2>
<p class="card__text">砂漠は降水量が非常に少ない乾燥地帯です。砂は軽くサラサラしていますが、砂漠を歩くのは簡単ではありません。</p>
</div>
</div>
<!-- モーダルウィンドウを開くカード -->
<div class="modal__card card">
<div class="card__picture">
<img src="https://soya-blog.com/wp-content/themes/soya-blog/assets/images/jquery/modal/modal-picture-03.png" alt="コロッセオ">
</div>
<div class="card__main">
<h2 class="card__title">コロッセオ</h2>
<p class="card__text">コロッセオは古代ローマ時代に建てられた円形闘技場です。今はイタリアを代表する有名な観光名所になっています。</p>
</div>
</div>
</div>
</div>
<!-- モーダルウィンドウが開いた時の背景 -->
<div id="modal-visible" class="modal__background">
<div id="create-card" class="card js-card-close">
<div id="modal-picture" class="card__picture">
<img src="#" alt="">
</div>
<div class="card__main">
<h2 id="modal-title" class="card__title"></h2>
<p id="modal-text" class="card__text"></p>
</div>
<!-- モーダルウィンドウを閉じるボタン -->
<div id="modal-close" class="modal__close">
<div class="modal__icon"></div>
</div>
</div>
</div> /* リセットCSS */
*,
*::before,
*::after {
box-sizing: border-box;
}
p {
margin: 0;
}
.layout {
display: flex;
justify-content: center;
align-items: center;
max-width: calc(1000px + 30px * 2);
height: 100vh;
margin: 0 auto;
padding: 30px;
}
.modal__cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
justify-content: center;
gap: 30px;
}
.card {
cursor: pointer;
border: 1px solid #000;
border-radius: 10px;
}
.card__picture {
height: 180px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 10px 10px 0 0;
}
}
.card__main {
padding: 20px 18px;
border-radius: 0 0 10px 10px;
background-color: #fff;
}
.card__title {
font-size: 18px;
color: #000;
}
.card__text {
margin-top: 10px;
font-size: 16px;
}
.modal__background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 50px 30px;
opacity: 0;
background: rgba(0, 0, 0, 50%);
visibility: hidden;
transition: 0.3s;
}
.visible {
opacity: 1;
visibility: visible;
}
#modal-visible > .card {
cursor: default;
position: relative;
max-width: 500px;
border: 1px solid #000;
border-radius: 10px;
}
.modal__close {
position: absolute;
top: -20px;
right: -20px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
.modal__icon {
position: relative;
width: 100%;
height: 100%;
text-align: center;
&::before {
content: "";
position: absolute;
top: 48%;
left: calc((100% - 28px) / 2);
transform: rotate(45deg);
width: 28px;
height: 3px;
background-color: #000;
}
&::after {
content: "";
position: absolute;
top: 48%;
left: calc((100% - 28px) / 2);
transform: rotate(-45deg);
width: 28px;
height: 3px;
background-color: #000;
}
}$(function(){
var card = $('.card'),
modal_visible = $('#modal-visible'),
close = $('#modal-close');
card.on('click', function() {
// クリックされたカードが js-card-close クラスを持っているかを確認
// 既に js-card-close クラスがある場合、モーダルを表示しない
if ($(this).hasClass('js-card-close')) {
return;
}
// クリックしたカードの情報を取得
var imgSrc = $(this).find('.card__picture img').attr('src');
var imgAlt = $(this).find('.card__picture img').attr('alt');
var title = $(this).find('.card__title').text();
var text = $(this).find('.card__text').text();
// モーダルで表示したカードに情報を反映
$('#modal-picture img').attr('src', imgSrc).attr('alt', imgAlt);
$('#modal-title').text(title);
$('#modal-text').text(text);
modal_visible.addClass('visible');
});
// ×アイコンをクリックしたらモーダルを閉じる
close.on('click', function(){
modal_visible.removeClass('visible');
});
// モーダルの外側をクリックしたらモーダルを閉じる
modal_visible.on('click', function(event) {
// クリックした要素がカードの部分であれば処理を中止する
if ($(event.target).closest(card).length === 0) {
modal_visible.removeClass('visible');
}
});
});
External CSS
This Pen doesn't use any external CSS resources.