Line 111: | Line 111: | ||
min-height: 100%; | min-height: 100%; | ||
} | } | ||
+ | |||
+ | .popup { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | cursor: pointer; | ||
+ | -webkit-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | user-select: none; | ||
+ | } | ||
+ | |||
+ | /* The actual popup */ | ||
+ | .popup .popuptext { | ||
+ | visibility: hidden; | ||
+ | width: 160px; | ||
+ | background-color: #555; | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | border-radius: 6px; | ||
+ | padding: 8px 0; | ||
+ | position: absolute; | ||
+ | z-index: 1; | ||
+ | bottom: 125%; | ||
+ | left: 50%; | ||
+ | margin-left: -80px; | ||
+ | } | ||
+ | |||
+ | /* Popup arrow */ | ||
+ | .popup .popuptext::after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | top: 100%; | ||
+ | left: 50%; | ||
+ | margin-left: -5px; | ||
+ | border-width: 5px; | ||
+ | border-style: solid; | ||
+ | border-color: #555 transparent transparent transparent; | ||
+ | } | ||
+ | |||
+ | /* Toggle this class - hide and show the popup */ | ||
+ | .popup .show { | ||
+ | visibility: visible; | ||
+ | -webkit-animation: fadeIn 1s; | ||
+ | animation: fadeIn 1s; | ||
+ | } | ||
+ | |||
+ | /* Add animation (fade in the popup) */ | ||
+ | @-webkit-keyframes fadeIn { | ||
+ | from {opacity: 0;} | ||
+ | to {opacity: 1;} | ||
+ | } | ||
+ | |||
+ | @keyframes fadeIn { | ||
+ | from {opacity: 0;} | ||
+ | to {opacity:1 ;} | ||
+ | } | ||
Line 195: | Line 251: | ||
<div class="right"> | <div class="right"> | ||
+ | <div class="popup" onclick="myFunction()"> | ||
<div class="round"> | <div class="round"> | ||
<img src="https://static.igem.org/mediawiki/2017/2/26/Andrew.PNG" alt=""/> | <img src="https://static.igem.org/mediawiki/2017/2/26/Andrew.PNG" alt=""/> | ||
− | + | </div> | |
+ | <span class="popuptext" id="myPopup">Hello World</span> | ||
</div> | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | // When the user clicks on div, open the popup | ||
+ | function myFunction() { | ||
+ | var popup = document.getElementById("myPopup"); | ||
+ | popup.classList.toggle("show"); | ||
+ | } | ||
+ | </script> | ||
+ | |||
+ | |||
Revision as of 12:24, 23 July 2017