Minimal Accessible Modal JavaScript Plugin – Pure-modal

Preview:

Description:

Pure-modal is a minimal, clean, accessible, animated modal component for modern web design.

How to use it:

Insert the Pure-modal’s JavaScript and Stylesheet into the html page.

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

Create the html for the modal window.

<div class="modal" id="modal1" role="dialog" aria-labelledby="modal-1" aria-describedby="basic-modal" tabindex="-1" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
          <svg width="16" height="16" viewBox="0 0 40 40">
            <path stroke-linecap="round" class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" stroke="#000" fill="transparent" stroke-width="5"></path>
          </svg>
        </button>
      </div>
      <div class="modal-body">
        Modal Content
      </div>
      <div class="modal-footer">
        <button data-dismiss="modal" aria-label="Close">Close</button>
      </div>
      </div>
    </div>
  </div>
</div>

Create a trigger element (button or link) to toggle the modal window.

<button data-toggle="modal" data-target="modal1">Launch The Modal</button>

Initialize the Pure-modal plugin and done.

const modal1 = new Modal('modal1');
modal1.init();

Disable/enable the transition effect.

const modal1 = new Modal('modal1',{
      { transition: false }
});
modal1.init();

Changelog:

04/14/2019

• Refactored, fixed bugs, new build