帶有 HTML、CSS 和 JS 的模態圖像

Question

我目前正在嘗試根據此處的代碼制作圖片庫： http : //www.w3schools.com/howto/howto_css_modal_images.asp

但是，這在以下結構中不起作用。 我已經添加了所有 JS，但仍然無法正常工作。 任何人都可以幫忙嗎？ 我在底部添加了 JsFiddle。 謝謝！

        <section id="reflective" class="two">

            <div class="container">

                <div class="row">
                    <div class="4u">
                        <article class="item">

                            <img class="image full myImg" src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/dog-medium-landing-hero.ashx" alt="W3Schools.com" />

                            <!-- The Modal -->
                            <div id="myModal" class="modal">
                                  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
                                  <img class="modal-content" id="img01">
                                  <div id="caption"></div>
                            </div>
                        </article>
                    </div>
                </div>
            </div>

        </section>

http://jsfiddle.net/ohLbw3u0/

Answer 1

添加jQuery ，它是這里的一個依賴項，您還沒有添加它。

結帳更新Fiddle 。 或者看看下面的工作片段：

 // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = $('.myImg'); var modalImg = $("#img01"); var captionText = document.getElementById("caption"); if (img) { $('.myImg').click(function() { modal.style.display = "block"; var newSrc = this.src; modalImg.attr('src', newSrc); captionText.innerHTML = this.alt; }); } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal if (span) { span.onclick = function() { modal.style.display = "none"; }; }

 .myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } .myImg:hover { opacity: 0.7; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from { -webkit-transform: scale(0) } to { -webkit-transform: scale(1) } } @keyframes zoom { from { transform: scale(0) } to { transform: scale(1) } } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px) { .modal-content { width: 100%; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section id="reflective" class="two"> <div class="container"> <header> <h2>Reflective Journal 3</h2> </header> <p>Yes</p> <div class="row"> <div class="4u"> <article class="item"> <img class="image full myImg" src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/dog-medium-landing-hero.ashx" alt="W3Schools.com" /> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> <header> <h3>Ipsum Feugiat</h3> </header> </article> </div> </div> </div> </section>

希望這可以幫助！