Make a popup box with CSS and Javascript

Like tooltip, but you can put anything inside popup box such as menu list, description, image, profile...
Unlike tooltip, with popup box, you have to click to toggle show its contents.

Step 1: Add HTML code below into your HTML file, put into your position that you want to show popup box.

 <div class="popup-menu" onclick="onShowHidePopup()">Click me!
   <span class="popup-content" id="myPopup">
      <p>Tada! This is the content. Contain anything that you want to show, such as Menu-list, image, description, profile...</p>
   </span>
 </div>

Copy this code

When the user click on the button "popup-menu", the popup box will be open and click again to close it.

Step 2: Add CSS code to style your popup box:

 .popup-menu {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 text-align: center;
 width: 160px;
  background: #eee;
  border-radius: 5px;
  padding:5px 10px;
  color:#444;
  border: 1px solid #ccc;
}

/* css for popup content */
.popup-menu .popup-content {
  visibility: hidden;
  width: 200px;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -108px;
}

/* css for popup arrow */
.popup-menu .popup-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0,0,0,0.6) transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup-menu .show {
  visibility: visible;
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
Copy this code


Step 3: Add Javascript code below

    function onShowHidePopup() {
        const popup = document.getElementById("myPopup");
        popup.classList.toggle("show");
    }
Copy this code


See demo: