Difference between revisions of "Team:Toronto/WetLab/ExperimentProtocols"
| Line 104: | Line 104: | ||
<div id="caption"></div> | <div id="caption"></div> | ||
</div> | </div> | ||
| + | |||
| + | <script> | ||
| + | // Get the modal | ||
| + | var modal = document.getElementById('PopupModal'); | ||
| + | |||
| + | // Get the image and insert it inside the modal - use its "alt" text as a caption | ||
| + | var img = document.getElementById('PopupImg'); | ||
| + | var modalImg = document.getElementById("img01"); | ||
| + | var captionText = document.getElementById("caption"); | ||
| + | img.onclick = function(){ | ||
| + | modal.style.display = "inline"; | ||
| + | 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> | ||
| + | |||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 20:20, 10 August 2018
×
![]()