Tiny Framework-agnostic Modal JavaScript Library – EasyModal

Preview:

Description:

A simple, lightweight, zero-dependency modal JavaScript library that is compatible with any third-party frameworks like Tailwind, Bulma, Bootstrap, etc.

How to use it:

1. Import the EasyModal’s JavaScript and Stylesheet.

<link rel="stylesheet" href="assets/styles/EasyModal/EasyModal.css">
<script type="module">
  import EasyModal from './assets/scripts/EasyModal/EasyModal.js'
</script>

2. Add the modal markup to your page. Note that the CSS classes without ‘easy-modal’ are OPTIONAL classes depending on the framework you’re using.

<div class="my-easy-modal easy-modal easy-modal--fade">
  <div class="easy-modal__content p-4 rounded-sm">
    <h1>Do you really want to delete this record?</h1>
    <div class="mt-8 grid grid-cols-2 gap-4">
      <div>
        <button class="close-my-easy-modal w-full px-4 py-2 bg-gray-200 rounded-sm text-sm font-medium">Cancel</button>
      </div>
      <div>
        <button class="w-full px-4 py-2 bg-blue-600 rounded-sm text-sm font-medium text-white">Yes, delete</button>
      </div>
    </div>
  </div>
</div>

3. Create a new instance of the EasyModal.

const myEasyModal = new EasyModal({
      el: '.my-easy-modal',
      close: '.close-my-easy-modal' // close elemnent
})

4. Toggle the modal window.

// start the library
myEasyModal.start();
// launch the modal
myEasyModal.open();
// close the modal
myEasyModal.close();

5. Enable a button to launch the modal.

<button class="open-my-easy-modal">
  Open EasyModal
</button>

const myEasyModal = new EasyModal({
      el: '.my-easy-modal',
      open: '.open-my-easy-modal'
      close: '.close-my-easy-modal'
})

6. Prevent the modal window from closing by clicking outside.

const myEasyModal = new EasyModal({
      el: '.my-easy-modal',
      persistent: true,
      close: '.close-my-easy-modal'
})

7. Trigger functions as the modal is launched & closes.

const myEasyModal = new EasyModal({
      el: '.my-easy-modal',
      close: '.close-my-easy-modal',
      beforeOpen: () => console.log('before open'),
      beforeClose: () => console.log('before close')
})