Pop-ups

Overview

Pop-ups are helpful in displaying any content like text and forms that can be hidden and shown by a click of a button.

How To Use

To add pop-ups to your page you must do the following:

• Add a button to open the pop-up
• Add your content inside the pop-up

Markup

Use the div element with the class of open-overlay to create a button that will initiate the pop-up when clicked. Give a unique name for the data-target attribute.

Use the div element with the class of modal-overlay to begin building the pop-up itself. Use the same unique name from the open-overlay button's data-target attribute as an ID for the overlay-content class. Any content should be placed in the div element with the class overlay-content-wrapper.

<a href="#" class="open-overlay btn" data-target="custom-popup-name">Open Popup</a>

<div class="modal-overlay">
  <div class="overlay-content" id="custom-popup-name">
    <button class="close-overlay">Close</button>
    <div class="overlay-content-wrapper">
      <!-- Your Content Here -->
    </div>
  </div>
</div>