Difference between revisions of "Team:Toronto/WetLab/ExperimentProtocols"

Line 1: Line 1:
 
{{Template:Toronto/CSS}}
 
{{Template:Toronto/CSS}}
 
<html>
 
<html>
−
<img id="myPopImg" src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
+
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<style>
 +
body {font-family: Arial, Helvetica, sans-serif;}
 +
 
 +
#myImg {
 +
    border-radius: 5px;
 +
    cursor: pointer;
 +
    transition: 0.3s;
 +
}
 +
 
 +
#myImg:hover {opacity: 0.7;}
 +
 
 +
-
 +
</style>
 +
</head>
 +
<body>
 +
 
 +
<h2>Image Modal</h2>
 +
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
 +
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
 +
 
 +
<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
  
 
<!-- The Modal -->
 
<!-- The Modal -->
−
<div id="myPopModal" class="modal">
+
<div id="myModal" class="modal">
 
   <span class="close">&times;</span>
 
   <span class="close">&times;</span>
 
   <img class="modal-content" id="img01">
 
   <img class="modal-content" id="img01">
Line 10: Line 32:
 
</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>
 +
 +
</body>
 
</html>
 
</html>

Revision as of 19:57, 10 August 2018

Image Modal

In this example, we use CSS to create a modal (dialog box) that is hidden by default.

We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.

Snow