Q&A
>画像は複数枚あり
の部分が質問に含まれていませんよね？
ちょっとなにをどうしたいかわかりません。
なおモーダル処理はdialogでやるのがベターです
実現したいこと
画像クリックでタイトル、縮小版の画像、任意のテキストを表示できるモーダルウィンドウの実装
発生している問題・分からないこと
画像一枚に対してならば問題なく動くのですが、画像を複数枚にしたい場合、
どのように修正を加えればいいかわかりません。
・画像をクリックすると、モーダルウィンドウが表示される。
・画像は複数枚あり(ギャラリーは使わない)、それぞれに対応した異なるモーダルウィンドウを
表示する。
・モーダルウィンドウを閉じた後、何度でもモーダルウィンドウを再表示・非表示できる。
・モーダルウィンドウを閉じる際、画面上に戻さずに、モーダルウィンドウを開く前の画面の位置に
戻る。
これらの要件を満たしたものを作りたいです。
よろしくお願いします。
該当のソースコード
modal.html
1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Image Modal Example</title> 8 <link rel="stylesheet" href="modal.css"> 9</head> 10<body> 11 <h1>モーダルウィンドウ テスト用</h1> 12 13 <img id="mainImage1" src="画像ファイル" alt="Main Image" class="clickable-image1"> 14 <!-- Modal --> 15 <div id="myModal1" class="modal1"> 16 <div class="modal-content1"> 17 <span class="close">×</span> 18 <h2>タイトル</h2> 19 <img id="modalImage1" src="" alt="Modal Image" class="modal-image1"> 20 <p>任意の文章</p> 21 </div> 22 </div><br> 23 24 <img id="mainImage2" src="画像ファイル" alt="Main Image" class="clickable-image2"> 25 <!-- Modal --> 26 <div id="myModal2" class="modal2"> 27 <div class="modal-content2"> 28 <span class="close">×</span> 29 <h2>タイトル</h2> 30 <img id="modalImage2" src="" alt="Modal Image" class="modal-image2"> 31 <p>任意の文章</p> 32 </div> 33 </div><br> 34 <script src="modal.js"></script> 35</body> 36
modal.css
1 2.close { 3 color: #aaa; 4 float: right; 5 font-size: 28px; 6 font-weight: bold; 7} 8.close:hover, 9.close:focus { 10 color: black; 11 text-decoration: none; 12 cursor: pointer; 13} 14 15.clickable-image1 { 16 width: 100%; 17 max-width: 500px; 18 height: auto; 19 cursor: pointer; 20} 21.modal1 { 22 display: none; 23 position: fixed; 24 z-index: 1; 25 left: 0; 26 top: 0; 27 width: 100%; 28 height: 100%; 29 overflow: auto; 30 background-color: rgba(0,0,0,0.4); 31} 32.modal-content1 { 33 background-color: #fefefe; 34 margin: 15% auto; 35 padding: 20px; 36 border: 1px solid #888; 37 width: 80%; 38 max-width: 600px; 39 position: relative; 40} 41.modal-image1 { 42 width: 100%; 43 max-width: 200px; 44 height: auto; 45 display: block; 46 margin: 0 auto; 47} 48 49.clickable-image2 { 50 width: 100%; 51 max-width: 500px; 52 height: auto; 53 cursor: pointer; 54} 55.modal2 { 56 display: none; 57 position: fixed; 58 z-index: 1; 59 left: 0; 60 top: 0; 61 width: 100%; 62 height: 100%; 63 overflow: auto; 64 background-color: rgba(0,0,0,0.4); 65} 66.modal-content2 { 67 background-color: #fefefe; 68 margin: 15% auto; 69 padding: 20px; 70 border: 1px solid #888; 71 width: 80%; 72 max-width: 600px; 73 position: relative; 74} 75.modal-image2 { 76 width: 100%; 77 max-width: 200px; 78 height: auto; 79 display: block; 80 margin: 0 auto; 81} 82
modal.js
1 2document.addEventListener('DOMContentLoaded', () => { 3 const modal = document.getElementById('myModal'); 4 const img = document.getElementById('mainImage'); 5 const modalImg = document.getElementById('modalImage'); 6 const span = document.getElementsByClassName('close')[0]; 7 8 img.onclick = function() { 9 // Save scroll position 10 document.body.dataset.scrollY = window.scrollY; 11 12 // Open modal 13 modal.style.display = 'block'; 14 modalImg.src = img.src; 15 } 16 17 span.onclick = function() { 18 // Close modal and restore scroll position 19 modal.style.display = 'none'; 20 window.scrollTo(0, document.body.dataset.scrollY); 21 } 22 23 window.onclick = function(event) { 24 if (event.target === modal) { 25 // Close modal when clicking outside the modal 26 modal.style.display = 'none'; 27 window.scrollTo(0, document.body.dataset.scrollY); 28 } 29 } 30}); 31
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
modal1,modal2・・・のようにクラスに連番を付与し、量産して試してみましたが２枚目以降が
うまく動作しませんでした。
コードが長くなっても問題ないので、ご教授いただけると助かります。。。
補足
追記
① 「画像は複数枚あり」の部分が質問に含まれていないとのこと、修正しました。
失礼いたしました。
② 写真掲載サイトを作りたいと思っています。
載せた写真全てに対してそれぞれ異なるモーダルウィンドウを表示させたいです。
(写真1にはモーダルウィンドウ1、
写真2にはモーダルウィンドウ2・・・)
③画像が複数あるverに直しました。
④idを修正しました。
画像が複数存在するときのコードを開示した方が回答しやすいかと思います。
mainImageというidが複数あります。コピペミスですか？
ほんとですね。
改良するときに連番を付け忘れていたようです。
修正します。
回答1件
0
ベストアンサー
簡単なモーダルのサンプル
モーダルの中身はtemplateにいれてあり、クリックされたtargetのdata-forのセレクタをみて表示内容を変えています。モーダル自体はdialogをつかってください
html
1<script> 2document.addEventListener('click',({target})=>{ 3 const modal=myModal 4 const tmp=document.querySelector('template').content; 5 if(target.matches('img[data-for]')){ 6 const content=tmp.querySelector(target.dataset.for).cloneNode(true); 7 modal.textContent=""; 8 modal.appendChild(content); 9 modal.showModal(); 10 } 11 if(target.matches('dialog .close')){ 12 target.closest('dialog').close(); 13 } 14}); 15</script> 16 17<img data-for="#myModal1" src="画像ファイル" alt="Main Image 1" class="clickable-image1"><br> 18<img data-for="#myModal2" src="画像ファイル" alt="Main Image 2" class="clickable-image2"> 19<dialog id="myModal"></dialog> 20<template> 21<div id="myModal1" class="modal1"> 22<div class="modal-content1"> 23<span class="close">×</span> 24<h2>タイトル1</h2> 25<img id="modalImage1" src="" alt="Modal Image 1" class="modal-image1"> 26<p>任意の文章1</p> 27</div> 28</div> 29<div id="myModal2" class="modal2"> 30<div class="modal-content2"> 31<span class="close">×</span> 32<h2>タイトル2</h2> 33<img id="modalImage2" src="" alt="Modal Image 2" class="modal-image2"> 34<p>任意の文章2</p> 35</div> 36</div> 37</template>
投稿2024/09/05 00:38
総合スコア116466
回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。
初心者なもので何を言っているのかよく分からなかったと思いますが、ご教授いただき大変助かりました。
templateは色々応用できそうなので、使いこなせるよう試行錯誤しながら頑張ります。
ありがとうございました！
あなたの回答
tips
プレビュー
