Difference between revisions of "Team:SDU-Denmark/Model"

Line 54: Line 54:
  
 
</div>
 
</div>
 +
 +
 +
<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'">&times;</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-->

Revision as of 14:20, 18 October 2016

The Best


lacticin effect