Difference between revisions of "Team:Toronto/WetLab/ExperimentProtocols"
| Line 5: | Line 5: | ||
<style> | <style> | ||
body {font-family: Arial, Helvetica, sans-serif;} | body {font-family: Arial, Helvetica, sans-serif;} | ||
| − | + | ||
#PopupImg { | #PopupImg { | ||
border-radius: 45px; | border-radius: 45px; | ||
| Line 11: | Line 11: | ||
transition: 0.3s; | transition: 0.3s; | ||
} | } | ||
| − | + | ||
#PopupImg:hover {opacity: 0.7; z-index: -1;} | #PopupImg:hover {opacity: 0.7; z-index: -1;} | ||
| − | + | ||
/* The Modal (background) */ | /* The Modal (background) */ | ||
.modal { | .modal { | ||
| Line 28: | Line 28: | ||
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ | background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ | ||
} | } | ||
| − | + | ||
/* Modal Content (image) */ | /* Modal Content (image) */ | ||
.modal-content { | .modal-content { | ||
| Line 36: | Line 36: | ||
overflow-y: scroll; | overflow-y: scroll; | ||
} | } | ||
| − | + | ||
/* Caption of Modal Image */ | /* Caption of Modal Image */ | ||
#caption { | #caption { | ||
| Line 48: | Line 48: | ||
height: 150px; | height: 150px; | ||
} | } | ||
| − | + | ||
/* Add Animation */ | /* Add Animation */ | ||
.modal-content, #caption { | .modal-content, #caption { | ||
| Line 56: | Line 56: | ||
animation-duration: 0.6s; | animation-duration: 0.6s; | ||
} | } | ||
| − | + | ||
@-webkit-keyframes zoom { | @-webkit-keyframes zoom { | ||
from {-webkit-transform:scale(0)} | from {-webkit-transform:scale(0)} | ||
to {-webkit-transform:scale(1)} | to {-webkit-transform:scale(1)} | ||
} | } | ||
| − | + | ||
@keyframes zoom { | @keyframes zoom { | ||
from {transform:scale(0)} | from {transform:scale(0)} | ||
to {transform:scale(1)} | to {transform:scale(1)} | ||
} | } | ||
| − | + | ||
/* The Close Button */ | /* The Close Button */ | ||
.close { | .close { | ||
| Line 77: | Line 77: | ||
transition: 0.3s; | transition: 0.3s; | ||
} | } | ||
| − | + | ||
.close:hover, | .close:hover, | ||
.close:focus { | .close:focus { | ||
| Line 84: | Line 84: | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
| − | + | ||
/* 100% Image Width on Smaller Screens */ | /* 100% Image Width on Smaller Screens */ | ||
@media only screen and (max-width: 700px){ | @media only screen and (max-width: 700px){ | ||
| Line 91: | Line 91: | ||
} | } | ||
} | } | ||
| − | + | ||
| − | + | .image { | |
| − | position: relative; | + | position: relative; |
| − | + | width: 100%; /* for IE 6 */ | |
| − | + | ||
} | } | ||
| − | + | ||
| + | h2 { | ||
| + | position: absolute; | ||
| + | top: 200px; | ||
| + | left: 0; | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
</style> | </style> | ||
</head> | </head> | ||
| Line 112: | Line 118: | ||
<div style="padding-top: 20px; margin-left:auto; margin-right:auto"> | <div style="padding-top: 20px; margin-left:auto; margin-right:auto"> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
| − | <a href="https://static.igem.org/mediawiki/2018/e/e4/T--Toronto--_Colony_PCR_Protocol_content.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2>Protocol:<br />Something</h2> </a> | + | <div class="image"> |
| − | + | <a href="https://static.igem.org/mediawiki/2018/e/e4/T--Toronto--_Colony_PCR_Protocol_content.pdf"><img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2>Protocol:<br />Something</h2> </a> | |
| + | </div> | ||
</div> | </div> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
| Line 133: | Line 140: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | + | ||
<div style="padding-top: 20px; float: bottom;"> | <div style="padding-top: 20px; float: bottom;"> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
| Line 145: | Line 152: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | + | ||
<div style="padding-top: 20px; float: bottom;"> | <div style="padding-top: 20px; float: bottom;"> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
| Line 157: | Line 164: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | + | ||
<div style="padding-top: 20px; float: bottom;"> | <div style="padding-top: 20px; float: bottom;"> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
| Line 199: | Line 206: | ||
<!--alert(target.src);--> | <!--alert(target.src);--> | ||
var modal = document.getElementById('PopupModal'); | 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 = target.alt; | var img = target.alt; | ||
| Line 206: | Line 213: | ||
modal.style.display = "inline"; | modal.style.display = "inline"; | ||
modalImg.src = target.src; | modalImg.src = target.src; | ||
| − | + | ||
| − | + | ||
captionText.innerHTML = target.alt; | captionText.innerHTML = target.alt; | ||
// Get the <span> element that closes the modal | // Get the <span> element that closes the modal | ||
var span = document.getElementsByClassName("close")[0]; | var span = document.getElementsByClassName("close")[0]; | ||
| − | + | ||
// When the user clicks on <span> (x), close the modal | // When the user clicks on <span> (x), close the modal | ||
span.onclick = function() { | span.onclick = function() { | ||
Revision as of 00:27, 25 August 2018
×
![]()