Chances are there's no web project you realized that didn't involve the creation of a popup message: whether it's a confirmation for deleting an item or for adding an item to the cart, popup messages are always part of the flow. Hence we created this simple yet handy resource, whose only enhancement is a subtle entry effect.

Creating the structure

The HTML structure is very basic: a .cd-popup div that contains the entire popup (including the semi-transparent background), a .cd-popup-container that is the content wrapper, an unordered list for the 2 call-to-action buttons and the anchor tag that is used to close the popup.

<div class="cd-popup" role="alert">
   <div class="cd-popup-container">
      <p>Are you sure you want to delete this element?</p>
      <ul class="cd-buttons">
         <li><a href="#0">Yes</a></li>
         <li><a href="#0">No</a></li>
      </ul>
      <a href="#0" class="cd-popup-close img-replace">Close</a>
   </div> <!-- cd-popup-container -->
</div> <!-- cd-popup -->

Adding style

The only thing worth pointing out about the CSS is the nice transition when the popup becomes visible. It's achieved by combining the visibility and opacity properties with a CSS3 transition. For the content wrapper, the default position is slightly translated up at the beginning (transform: translateY(-40px)), and modified at the end of the transition to translateY(0).

.cd-popup {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

.cd-popup.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup-container {
  transform: translateY(-40px);
  transition-property: transform;
  transition-duration: 0.3s;
}

.is-visible .cd-popup-container {
  transform: translateY(0);
}

Events handling

In jQuery we just added/removed classes, no trick to learn here.

Any feedback/suggestion, feel free to leave a comment ;)