JavaScript Plugin for Creating Beautiful Modals for the Web | EasyModal

How to make use of it:

1. Import 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 web page.

<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 for 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 exterior.

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

7. Trigger capabilities because 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')
})

Options

Available functions

Tiny Framework-agnostic Modal, EasyModal Plugin/Github, what is a modal in web design

See Demo And Download