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

Line 13: Line 13:
  
 
#PopupImg:hover {opacity: 0.7; z-index: -1;}
 
#PopupImg:hover {opacity: 0.7; z-index: -1;}
−
 
−
.popUpImgClass{
 
−
 
 
−
}
 
  
 
/* The Modal (background) */
 
/* The Modal (background) */
Line 100: Line 96:
 
<body>
 
<body>
  
−
<div class='bodyClearClass'>
+
<img id="PopupImg" src="https://static.igem.org/mediawiki/2018/c/cc/T--Toronto--6_29_2018_Safety_1.jpg" alt="Lab" style="width:100%;max-width:300px">
−
    <div class=oneLineSpacerClass>
+
−
    </div>
+
−
   
+
−
    <div class=oneLineSpacerClass>
+
−
    </div>
+
−
 
+
−
      <img class="popUpImgClass" id="PopupImg" src="https://static.igem.org/mediawiki/2018/c/cc/T--Toronto--6_29_2018_Safety_1.jpg" alt="Lab" style="width:100%;max-width:300px">
+
−
      <img class="popUpImgClass" id="PopupImg" src="https://static.igem.org/mediawiki/2018/c/cc/T--Toronto--6_29_2018_Safety_1.jpg" alt="Lab" style="width:100%;max-width:300px">
+
−
      <!-- The Modal -->
+
−
      <div id="PopupModal" class="modal">
+
−
        <span class="close">&times;</span>
+
−
        <img class="modal-content" id="img01">
+
−
        <div id="caption"></div>
+
−
      </div>
+
  
 +
<!-- The Modal -->
 +
<div id="PopupModal" class="modal">
 +
  <span class="close">&times;</span>
 +
  <img class="modal-content" id="img01">
 +
  <div id="caption"></div>
 
</div>
 
</div>
  
−
 
−
 
−
 
−
 
−
 
−
<!-- The Modal Script -->
 
 
<script>
 
<script>
 
// Get the modal
 
// Get the modal
−
var modal = document.getElementsByClassName('modal');
+
var modal = document.getElementById('PopupModal');
 +
 
 
// Get the image and insert it inside the modal - use its "alt" text as a caption
 
// Get the image and insert it inside the modal - use its "alt" text as a caption
−
var img = document.getElementsByClassName('popUpImgClass');
+
var img = document.getElementById('PopupImg');
 
var modalImg = document.getElementById("img01");
 
var modalImg = document.getElementById("img01");
 
var captionText = document.getElementById("caption");
 
var captionText = document.getElementById("caption");
Line 145: Line 127:
 
}
 
}
 
</script>
 
</script>
 +
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 21:03, 10 August 2018

Lab