Minimal Responsive Modal Box Using Pure JavaScript – bp-modal.js

Preview:

Description:

bp-modal.js is a small and simple-to-use JavaScript library that helps you display nice clean, responsive modal window on your web page.

How to use it:

Add the modal.min.css in the header for basic modal styles.

<link rel="stylesheet" href="modal.min.css">

Add the bp-modal.min.js script in your document, before the closing body tag.

<script src="bp-modal.min.js"></script>

Create a medium-sized modal window following the markup structure as shown below. This modal includes the class modal-closable which adds the fancy close button at the top right.

<div id="test" class="modal modal-medium modal-closeable">
  <div class="modal-header">
    <h2>Modal Header</h2>
  </div>
  <div class="modal-content">
    <p>Modal Content</p>
  </div>
</div>

You can launch the modal window using any element which has the corresponding data-modal value.

<p data-modal="test">Click me!</p>

Changelog:

07/10/2021

• Refactor