源代碼
點擊運行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程</title> <style> #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.1)} 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%; } } </style> </head> <body> <h2>圖片模態框</h2> <p>本實例演示了如何結合 CSS 和 JavaScript 來一起渲染圖片。</p><p> 首先,我們使用 CSS 來創建 modal 窗口 (對話框), 默認是隱藏的。<p> <p>然後,我們使用 JavaScript 來顯示模態窗口,當我們點擊圖片時,圖片會在彈出的窗口中顯示:</p> <img id="myImg" src="/images/logo.png" alt="Northern Lights, Norway" width="300" height="200"> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">×</span> /images/logo.png <div id="caption"></div> </div> <script> // 獲取模態窗口 var modal = document.getElementById('myModal'); // 獲取圖片模態框,alt 屬性作為圖片彈出中文本描述 var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; modalImg.alt = this.alt; captionText.innerHTML = this.alt; } // 獲取 <span> 元素,設置關閉模態框按鈕 var span = document.getElementsByClassName("close")[0]; // 點擊 <span> 元素上的 (x), 關閉模態框 span.onclick = function() { modal.style.display = "none"; } </script> </body> </html>
運行結果