Difference between revisions of "Team:Hong Kong-CUHK/Team"
| 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