JavaScript Plugin for Creating Beautiful Modals for the Web | EasyModal

easymodal-plugin

EasyModal is a JavaScript plugin for creating easy and beautiful forms of web applications compatible with any external frameworks such as Tailwind, Bulma, Bootstrap, etc.

beautiful modal css, website modal examples, best modal popup design, alternative to modal popup, modal design css, alternatives to modal windows, modern modal design

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

AttributeRequiredDefaultDescription
elyesnullSelector to find your EasyModal
persistentnofalseIf true, modal won’t close on click outrsie
opennonullElement to click and open modal
closenonullElement to click and close modal
beforeOpennonullFunction to run before modal opens
beforeClosenonullFunction to run before modal closes

Available functions

FunctionDescription
start()Start EasyModal class. If not used, EasyModal won’t work
open()Opens the modal
close()Closes the modal

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


See Demo And Download

Official Website(wesleylopex): Click Here

This superior jQuery/javascript plugin is developed by wesleylopex. For extra Advanced Usages, please go to the official website.