|
|
| Line 56: |
Line 56: |
| | | | |
| | | | |
| − | <style>
| |
| − | /* Style the Image Used to Trigger the Modal */
| |
| − | #myImg {
| |
| − | border-radius: 5px;
| |
| − | cursor: pointer;
| |
| − | transition: 0.3s;
| |
| − | }
| |
| | | | |
| − | #myImg:hover {opacity: 0.7;}
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − | <!-- Trigger the Modal -->
| |
| − | <img id="myImg" src="https://static.igem.org/mediawiki/2016/0/0b/T--SDU-Denmark--LacticinQ_effect.png" alt="lacticin effect" width="300" height="200">
| |
| − |
| |
| − | <!-- The Modal -->
| |
| − | <div id="myModal" class="modal">
| |
| − |
| |
| − | <!-- The Close Button -->
| |
| − | <span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
| |
| − |
| |
| − | <!-- Modal Content (The Image) -->
| |
| − | <img class="modal-content" id="img01" src="https://static.igem.org/mediawiki/2016/0/0b/T--SDU-Denmark--LacticinQ_effect.png" alt="bacto">
| |
| − |
| |
| − | <!-- Modal Caption (Image Text) -->
| |
| − | <div id="caption"></div>
| |
| − | </div>
| |
| | | | |
| | | | |
| | | | |
| | <!--- END CONTENT------------------------------------> | | <!--- END CONTENT------------------------------------> |
| − | <!--- POPUP------------------------------------>
| |
| − | <style>
| |
| − | // 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>
| |
| − | <!--- END POPUP------------------------------------>
| |
| − | <script>
| |
| − | var acc = document.getElementsByClassName("accordion");
| |
| − | var i;
| |
| | | | |
| − | for (i = 0; i < acc.length; i++) {
| |
| − | acc[i].onclick = function(){
| |
| − | this.classList.toggle("active");
| |
| − | this.nextElementSibling.classList.toggle("show");
| |
| − | }
| |
| − | }
| |
| − | </script>
| |
| | </div> <!-- END COL-11 --> | | </div> <!-- END COL-11 --> |
| | </div> <!-- END ROW--> | | </div> <!-- END ROW--> |
