Easy & Robust Modal JavaScript Library – EinsModal

Preview:

Description:

EinsModal is an easy yet robust and customizable modal window library built with vanilla JavaScript library.

Features:

• Responsive design.
• Dark & Light themes.
• 50 smooth CSS3 transitions.
• Supports both static and dynamic content.
• Developer-friendly API methods & events.

How to use it:

1. Install & import the EinsModal with NPM.

# Yarn
$ yarn add eins-modal
# NPM
$ npm i eins-modal --save

// Stylsheet
import 'eins-modal/dist/css/eins-modal.min.css'
// JavaScript
import EinsModal from 'eins-modal';

2. Or load the following JavaScript & CSS files in the HTML document.

<link href="css/eins-modal.min.css" rel="stylesheet" />
<!-- With Animations -->
<script src="js/eins-modal.min.js" defer></script>
<!-- Without Animations -->
<script src="js/eins-modal-plain.min.js" defer></script>

3. Initialize the library on document ready.

EinsModal.init();

4. The required HTML structure for the modal window.

<div id="myModal" class="eins-modal">
  <div class="eins-modal-content">
    <!-- Close Icon -->
    <div class="eins-modal-close"></div>
    <!-- Your Modal Content -->
    <p>A Modal Window</p>
    <!-- Close Button -->
    <button class="eins-modal-close-button">OK</button>
  </div>
</div>

5. To enable the dark mode, just add the eins-modal-dark class to the top container.

<div id="myModal" class="eins-modal eins-modal-dark">
  ...
</div>

6. Set the size of the modal window:

<div id="myModal" class="eins-modal eins-modal-sm">
  Small
</div>
<div id="myModal" class="eins-modal eins-modal-lg">
  Large
</div>
<div id="myModal" class="eins-modal eins-modal-xsm">
  Extra Small
</div>

7. Create a trigger button to toggle the modal window. Done.

<button data-modal-id="myModal">Launch</button>

8. Customize the Open Animation:

• transition.fadeIn
• transition.flipXIn
• transition.flipYIn
• transition.flipBounceXIn
• transition.flipBounceYIn
• transition.swoopIn
• transition.whirlIn
• transition.shrinkIn
• transition.expandIn
• transition.bounceIn (Default)
• transition.bounceUpIn
• transition.bounceDownIn
• transition.bounceLeftIn
• transition.bounceRightIn
• transition.slideUpIn
• transition.slideDownIn
• transition.slideLeftIn
• transition.slideUpBigIn
• transition.slideDownBigIn
• transition.slideLeftBigIn
• transition.slideRightBigIn
• transition.perspectiveUpIn
• transition.perspectiveDownIn
• transition.perspectiveLeftIn
• transition.perspectiveRightIn

<button class="eins-modal-button" 
        data-modal-id="myModal" 
        data-modal-options="openTransition: transition.flipYIn; openDuration: 500;">
        Launch
</button>

9. Customize the Close Animation:

• transition.fadeOut
• transition.flipXOut
• transition.flipYOut
• transition.flipBounceXOut
• transition.flipBounceYOut
• transition.swoopOut
• transition.whirlOut
• transition.shrinkOut
• transition.expandOut (Default)
• transition.bounceOut
• transition.bounceUpOut
• transition.bounceDownOut
• transition.bounceLeftOut
• transition.bounceRightOut
• transition.slideUpOut
• transition.slideDownOut
• transition.slideLeftOut
• transition.slideUpBigOut
• transition.slideDownBigOut
• transition.slideLeftBigOut
• transition.slideRightBigOut
• transition.perspectiveUpOut
• transition.perspectiveDownOut
• transition.perspectiveLeftOut
• transition.perspectiveRightOut

<button class="eins-modal-button" 
        data-modal-id="myModal" 
        data-modal-options="closeTransition: transition.whirlOut;closeDuration: 300;">
        Launch
</button>

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

<button class="eins-modal-button" 
        data-modal-id="myModal" 
        data-modal-options="backdropClose: false;">
        Launch
</button>

11. Determine whether to allow multiple modal windows. Default: true.

<button class="eins-modal-button" 
        data-modal-id="myModal" 
        data-modal-options="multiple: false;">
        Launch
</button>

12. Determine whether to wait till after the next action (open or close), before opening a new modal. Default: false.

<button class="eins-modal-button" 
        data-modal-id="myModal" 
        data-modal-options="wait: true;">
        Launch
</button>

13. API methods.

var options = {
  openTransition: 'transition.bounceIn',
  openDuration: 400,
  closeTransition: 'transition.expandOut',
  closeDuration: 200,
  backdropClose: true,
  multiple: true,
  wait: false,
}
// show the modal
document.getElementById('myModal').modal('show', options);
// close the modal
document.getElementById('myModal').modal('close', options);
// toggle the modal
document.getElementById('myModal').modal('toggle', options);
// add a trigger button
window.einsModal.addButton(triggerOrId, modalId, options);
// remove all trigger buttons
window.einsModal.removeButton(triggerOrId);
// open a specific modal
window.einsModal.open(modalElementOrId, options);
// close the current modal window
window.einsModal.close(options);
// set & update options
modal.setDefaultOptions(options);
// check if a modal is opened
window.einsModal.isOpen('myModal');
// get all opened modal windows
window.einsModal.getOpenModals();
// add modal function to target element
indow.einsModal.addModalFunction(modalOrId);

14. Events.

document.getElementById('myModal')
.addEventListener('show.eins.modal', function(){
  // do something
})
.addEventListener('shown.eins.modal', function(){
  // do something
})
.addEventListener('hide.eins.modal', function(){
  // do something
})
.addEventListener('hidden.eins.modal', function(){
  // do something
})
.addEventListener('global.eins.modal', function(){
  // do something
})

Changelog:

v2.2.2 (09/17/2021)

• Hotfix

v2.2.1 (08/11/2021)

• Hotfix

v2.2.0 (07/27/2021)

• EinsModal now initializes all elements like buttons and modals with window.onload, means after the DOM is rendered and ready. The location of the script tag is no longer important.

v2.1.0 (07/04/2021)

• New EinsModal “plain” mode

v2.0.0 (06/30/2021)

• Now you can open multiple Modals on top of each other without closing the current open one.
• EinsModal now has a action queue build in.
• You can now open a new modal after closing one, without using any custom javascript!
• When EinsModal opens a modal, it disables the scroll-ability of the body. You can fix that by using the new fill-scrollbar-gap class.
• Enhancements.