Minimal Accessible Modal JavaScript Plugin – Pure-modal

Category: Javascript , Modal & Popup | April 14, 2019
Views Total:126 views
Official Page:Go to website
Last Update:April 14, 2019


Minimal Accessible Modal JavaScript Plugin – Pure-modal


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>
      <div class="modal-body">
        Modal Content
      <div class="modal-footer">
        <button data-dismiss="modal" aria-label="Close">Close</button>

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');

Disable/enable the transition effect.

const modal1 = new Modal('modal1',{
      { transition: false }



  • Refactored, fixed bugs, new build

You Might Be Interested In:

Leave a Reply