Stackable Modal Popup With Blur Effect – Popbox.js

Popbox.js is a small and dependency-free JavaScript plugin to create stackable modal popups with a blur effect overlaying the main content.

How to use it:

To get started, first you need to load the following JavaScript and CSS files in the document.

<link href="popbox/popbox.css" rel="stylesheet">
<script src="popbox/popbox.js"></script>

Initialize the Popbox.js and enable the blur effect.

var myPopbox =  new Popbox({
    blur: true // default: false
});

Create the modal popup with a close button.

<div data-popbox-id="modal-example" class="popbox">
  <div class="popbox_container">
    <p class="heading">Modal Title</p>
    <p class="text">
      Modal Content
    </p>
    <button data-popbox-close="modal-example" class="danger">Close</button>
  </div>
</div>

Create a button (or any other trigger element) to toggle the modal popup.

<button data-popbox-target="modal-example">Launch The Modal</button>

You can also insert the toggle button into the modal content. So that you can open multiple modal popups on the same page.

<div data-popbox-id="modal-example" class="popbox">
  <div class="popbox_container">
    <p class="heading">Modal Title</p>
    <p class="text">
      Modal Content
    </p>
    <button data-popbox-close="modal-example" class="danger">Close</button>
    <button data-popbox-target="modal-another">Open another</button>
  </div>
</div>
<div data-popbox-id="modal-another" class="popbox">
  <div class="popbox_container">
    <p class="heading">Modal Title</p>
    <p class="text">
      Modal Content
    </p>
    <button data-popbox-close="modal-another" class="danger">Close</button>
  </div>
</div>

Determine if to show the background overlay.

var myPopbox =  new Popbox({
    overlay: true
});

Open & close the modal popup programmatically.

// open the modal
myPopbox.open('modalName'); 
// close the modal
myPopbox.close('modalName');  
// close all modal popups
myPopbox.clear();