Modern Modal Popup Plugin With Vanilla JavaScript – pop-it.js

pop-it.js is a lightweight, vanilla JavaScript library used for displaying a modern, animated, responsive modal popup on the webpage.

How to use it:

Load the needed styles.css that will provide the core styles for the modal.

<link href="css/styles.css" rel="stylesheet">

Create the modal content as follows:

<div class="u-modal">
  <div class="u-modal-box"><!-- .modal-box--fullscreen -->
      <div class="tar">
          <i class="u-modal-close" data-js="close-u-modal">close here</i>
      </div>
      <div class="u-modal-content">
          <div class="u-modal-column--full u-modal-column--animated" data-effect="slide-up">
              <h1 class="u-modal-title u-modal-txt--animated">Use this container to place your HTML elements according to your needs</h1>
              <p class="u-modal-txt u-modal-txt--animated">I'm a text</p>
              <p class="u-modal-txt u-modal-txt--animated">I'm a text</p>
          </div>
      </div>
      <div class="tar">
          <button class="u-modal-btn" data-js="close-u-modal">Understood</button>
      </div>
  </div>
</div>

Create a trigger button with the data-js="open-u-modal" attribute.

<button class="button" data-js="open-u-modal">Open pop-it</button>

Load the JavaScript file pop-it-1.0.js at the end of the document.

<script src="js/pop-it-1.0.js"></script>

Create a new Popit instance to active the modal.

new Popit();

Popit’s default configuration options.

new Popit({
    // auto display on page load
    auto : false,
    // "active"/"disabled" 
    // makes the outer veil available to attach an event to close de modal box
    veil : "active"
    
});

Changelog:

08/12/2018

• prefixes removed, paths to images updated