如何通過單擊圖像打開文本？
[英]How Do I Open Text by Clicking on An Image?
問題描述
我正在建立我的第一個網站，我試圖讓別人單擊圖像，然后打開文本來解釋該圖像的作用。
我還希望它使背景變暗，並允許用戶在文本彈出窗口之外單擊以關閉。
我感覺自己很親密，但是我可以幫忙。
任何建議表示贊賞！
謝謝！
- 約旦
<html> <head> <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 */ } } /* 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 */ #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%; } } </style> </head> <body> <h2>This is a Corona Bottle</h2> <p>I enjoy Corona!</p> <img id="myImg" src="http://thebearbrewpub.com/wp-content/uploads/2013/07/Corona.jpg" alt="Corona Bottle" width="300" height="200"> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> <script> // 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 = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; 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 span.onclick = function() { modal.style.display = "none"; } </script> <script> $('#myImg').on('click', function(){ $('#myImg').css("opacity", "0"); }) $('#closeTextBoxID').on('click', function(){ $('#myImg').css("opacity", "1"); }) </script> </body> </html>
1 個解決方案
解決方案1
0 已采納 2017-02-03 20:23:15
<html> <head> <style> #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal { color: white; 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 */ } } /* 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 */ #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%; } } </style> </head> <body> <h2>This is a Corona Bottle</h2> <p>I enjoy Corona!</p> <img id="myImg" src="http://thebearbrewpub.com/wp-content/uploads/2013/07/Corona.jpg" alt="Corona Bottle" width="300" height="200"> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">×</span> <div id="caption"></div> </div> <script> // 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 = document.getElementById('myImg'); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; 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 span.onclick = function() { modal.style.display = "none"; } </script> <script> $('#myImg').on('click', function(){ $('#myImg').css("opacity", "0"); }) $('#closeTextBoxID').on('click', function(){ $('#myImg').css("opacity", "1"); }) </script> </body> </html>
如何在菜單外添加單擊按鈕以打開新的文本字段，而不是單擊“其他”？
[英]How do I add a click button outside the menu to open a new text field instead of clicking on “other”?
如何編寫 function 以在單擊其指定按鈕時獲取不同的背景圖像和文本？
[英]how do I write the function for getting different background image and text upon clicking its designated button?
如何通過使用onclick單擊將圖像更改為其他圖像？
[英]How do i change an image into a different image by clicking on it with onclick?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.