Simple Confirmation Popup

Simple Confirmation Popup

Simple responsive confirmation dialog box, with a subtle CSS3 entry animation.

Nucleo icons

Sponsored by Nucleo, a free application to collect, customize and export all your icons as icon font and SVG symbols. Made by the CodyHouse folks!

All the resources available on CodyHouse are released under the BSD-3-Clause license. You can support our project with a Paypal donation 🙌

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 ;)

Join our newsletter

Get our monthly recap with the latest CodyHouse news