1

写真掲載サイトを作っています。

元々はクラス名に連番がついていないコードだったのですが、載せた写真全てに対してそれぞれ異なるモーダルウィンドウを表示させたかった
(写真1にはモーダルウィンドウ1、2には2・・・)ので連番を付与しました。

その結果、写真が一枚しかない状態ならば下記コードでも問題なく動くのですが、
画像が複数枚ある場合、2枚目以降はクリックしても反応しなくなってしまいました。
(追記. 1枚目のモーダルウィンドウが表示された状態で2枚目の写真をクリックではなく、1枚目のモーダルウィンドウを閉じた後2枚目をクリックしても反応しないということです。)

どのように修正を加えればよいでしょうか?

以下コード

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Modal Example</title>
    <link rel="stylesheet" href="modal.css">
</head>
<body>
    <h1>モーダルウィンドウ テスト用</h1>

    <img id="mainImage" src="画像ファイル" alt="Main Image" class="clickable-image1">
    <!-- Modal -->
    <div id="myModal" class="modal1">
        <div class="modal-content1">
            <span class="close">&times;</span>
            <h2>タイトル</h2>
            <img id="modalImage" src="" alt="Modal Image" class="modal-image1">
            <p>任意の文章</p>
        </div>
    </div><br>

    <img id="mainImage" src="画像ファイル" alt="Main Image" class="clickable-image2">
    <!-- Modal -->
    <div id="myModal" class="modal2">
        <div class="modal-content2">
            <span class="close">&times;</span>
            <h2>タイトル</h2>
            <img id="modalImage" src="" alt="Modal Image" class="modal-image2">
            <p>任意の文章</p>
        </div>
    </div><br>
    <script src="modal.js"></script>
</body>

CSS

/* Modal styles */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.clickable-image1 {
    width: 100%;
    max-width: 500px;
    height: auto;
    cursor: pointer;
}
.modal1 {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}
.modal-content1 {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    position: relative;
}
.modal-image1 {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.clickable-image2 {
    width: 100%;
    max-width: 500px;
    height: auto;
    cursor: pointer;
}
.modal2 {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}
.modal-content2 {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    position: relative;
}
.modal-image2 {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const modal = document.getElementById('myModal');
    const img = document.getElementById('mainImage');
    const modalImg = document.getElementById('modalImage');
    const span = document.getElementsByClassName('close')[0];

    img.onclick = function() {
        // Save scroll position
        document.body.dataset.scrollY = window.scrollY;

        // Open modal
        modal.style.display = 'block';
        modalImg.src = img.src;
    }

    span.onclick = function() {
        // Close modal and restore scroll position
        modal.style.display = 'none';
        window.scrollTo(0, document.body.dataset.scrollY);
    }

    window.onclick = function(event) {
        if (event.target === modal) {
            // Close modal when clicking outside the modal
            modal.style.display = 'none';
            window.scrollTo(0, document.body.dataset.scrollY);
        }
    }
});
5
  • 1
    写真をクリックすると、タイトル・縮小版の写真・説明文の書いてある小さいウィンドウを表示させたく、このウィンドウをモーダルウィンドウとしています。(正式名称かは分かりません)
    – user66108
    Commented 9月4日 23:48
  • 1
    「画像が複数枚ある場合、2枚目以降はクリックしても反応しなくなった」について、言葉足らずだったかもしれません。1枚目のモーダルウィンドウが表示された状態で2枚目の写真をクリックではなく、1枚目のモーダルウィンドウを閉じた後2枚目をクリックしても反応しないということです。モーダルウィンドウ表示中は、閉じるボタン以外反応しない仕様になっています。
    – user66108
    Commented 9月4日 23:56
  • 1
    質問文に追記しました。ご指摘ありがとうございました。
    – user66108
    Commented 9月5日 4:05
  • 1
    getElementById を使っているのですから、id がダブっているところを直さないとダメだと思います。そこを直しただけでうまくいくは分かりませんが(ざっと見た感じ、それだけでは期待した動きにならないと思いますが)、とにかくそれを直さないと話が先に進みません。
    – WebSurfer
    Commented 9月5日 8:01
  • 1
    なるほど、idのダブりを修正してどうなるか試してみます。
    – user66108
    Commented 9月5日 12:55

1 件の回答 1

1
  • モーダルダイアログには <dialog> を使う
  • 同じような役割の要素が複数ある場合、id属性は付けずに、同一のclassを与える
  • 同じ処理のイベントリスナを複数の要素に付けるのは面倒なので、documentwindow にイベントリスナを登録する
  • 画像とダイアログの関連付けは、下の例のように DOM の相対位置を利用したり、data-* 属性を利用したり。

document.addEventListener('click', e => {
  if (e.target.matches('.clickable-image')) {
    // Open modal
    const modal = e.target.nextElementSibling;
    modal.showModal();
    modal.querySelector('.modal-image').src = e.target.src;
    return;
  }
  if (e.target.matches('.close')) {
    // Close modal
    e.target.closest('dialog').close();
    return;
  }
  if (e.target.matches('dialog')) {
    // Close modal when clicking outside the modal
    e.target.close();
    return;
  }
});
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.clickable-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    cursor: pointer;
}

.modal::backdrop {
    background-color: rgba(0,0,0,0.4);
}
.modal {
    background-color: #fefefe;
    margin: 15% auto;
    width: 80%;
    max-width: 600px;
    padding: 20px;
    border: 1px solid #888;
}
.modal-content {
    height: 100%;
}
.modal-image {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
}
    <h1>モーダルダイアログ テスト用</h1>

    <img id="mainImage" src="https://placehold.jp/30/dd6699/ffffff/300x150.png?text=placeholder+image" alt="Main Image" class="clickable-image">
    <!-- Modal -->
    <dialog class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>タイトル</h2>
            <img src="" alt="Modal Image" class="modal-image">
            <p>任意の文章</p>
        </div>
    </dialog><br>

    <img id="mainImage" src="https://placehold.jp/30/99dd66/ffffff/300x150.png?text=placeholder+image" alt="Main Image" class="clickable-image">
    <!-- Modal -->
    <dialog class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>タイトル</h2>
            <img src="" alt="Modal Image" class="modal-image">
            <p>任意の文章</p>
        </div>
    </dialog><br>

3
  • 1
    確認が遅れました。回答ありがとうございます、おかげさまで問題はほとんど解決しました! 追加の質問で申し訳ないのですが、モーダルウィンドウ内の写真のサイズや、文章の量でモーダルウィンドウ自体の大きさを自動的に変えることはできるのでしょうか?(PCでは問題ないのですが、携帯からだと上手く表示されないことがあるようです)
    – user66108
    Commented 9月6日 7:34
  • 1
    それは元の質問にはない問題なので、別の新しい質問を立ててください。
    – int32_t
    Commented 9月6日 7:41
  • 1
    そうですね、失礼しました。(ちなみにモーダルウィンドウのサイズについてはこちらの用意したCSSの問題だったようです。)
    – user66108
    Commented 9月6日 7:43

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。