モーダルを作るために
解決したいこと
モーダルの作成に至って仕様で作り方が分からない部分を教えてもらいたいです。
今、一つのページの上部にカルーセル、下部にモーダルを作成しようとしています。
現在コードを見ての通り、画像をクリックしたらその画像が出る段階まではいったのですが、目標としている「画像をクリックしたら同じ画像が拡大表示される」の作り方がわかっていません。
拡大表示された際に背景を黒などの目立たない色に設定し拡大画像の下部には確認ボタンのようなものと上部には閉じるためのバツボタンを設定したいと思っています。
どなたかアドバイスお願いします。
発生している問題・エラー
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
### 該当するソースコード
```言語名
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>カルーセルのサンプル</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="test.js">
<style>
.content {
position: relative;
}
/* 画像に合わせてカルーセルの高さを調整 */
.slick-slide {
height: auto;
}
/* 背景の色に合わせて前後の矢印の色を調整 */
.slick-prev:before,
.slick-next:before {
color: #000;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1><img src="images/logo.png" alt="CookCampロゴ" </h1>
</div>
</header>
<div class="box">
<div class="carousel">
<!-- このセレクタを JavaScript で指定する -->
<img src="images/key_visual.jpg" alt="画像1">
<img src="images/key_visual2.jpg" alt="画像2">
<img src="images/key_visual3.jpg" alt="画像3">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" integrity="sha256-DHF4zGyjT7GOMPBwpeehwoey18z8uiz98G4PRu2lV0A=" crossorigin="anonymous"></script>
<script type="text/javascript" src="test.js"></script>
<div class="modal-list">
<a href="images/image01.jpg" data-group="image" class="image" data-modaal-desc="ディスクリプション"><img src="images/image01.jpg" /><a />
<button class="button"></button>
<p>季節の色どり前菜</p>
</div>
<div class="modal">
<div class="bigimg"><img src="" alt=""></div>
<p class="close-btn"><a href="">✖</a></p>
</div>
</body>
</html>
test.js
$('.carousel').slick({
// ここに slick のオプションを指定
dots: true,
autoplay: true,
autoplaySpeed: 5000,
prevArrow: '<img src="images/arrow2.png" class="slide-arrow prev-arrow">',
nextArrow: '<img src="images/arrow.png" class="slide-arrow next-arrow">',
});
$(".image").click(function() {
return false;
});
$('.image').modaal({
type: 'image'
});
$('.modal').click(() => {
$('.image').modaal('close'); // モーダルを閉じる
});
test.css
.box {
position: relative;
overflow: hidden;
}
.carousel {
max-width: 100%;
margin: 0 auto;
overflow: visible;
}
.slick-arrow {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
/*.arrow {
left: 0;
z-index: 10;
}
.arrow2 {
right: 0;
}*/
.slide-arrow{
position: absolute;
top: 50%;
margin-top: -16px;
width: 20px;
height: 33px;
opacity:0.7;
z-index:10;
}
.prev-arrow{
left: 5px;
}
.next-arrow{
right: 5px;
}
.grayDisplay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
/* コンテンツ全てに対して固定的に 1160pxとか指定されているときの対応で、
ダサいが!importantつける */
max-width: 100% !important;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
自分で試したこと
モーダルの書き方を理解出来てない為か、ここからどう追記すれば上記のような仕様に出来るか分からないです
0