Easy to Use Modal/Alert/Dialog/Popup with Vanilla JS | EinsModal

alert-dialog-popup-einsmodal

EinsModal is the best solution if you want to interact with your user. It works on every browser and device! (Internet Explorer >= 9). “Eins” is German and means “one“. Each Eins-Software-Product aims to be the only software solution you will need for its task.

micromodal example, modal js library, modal, micromodal javascript, css script example, modal js download, beautiful modal css, pure javascript modal

Features:

⚡ Created with vanilla Javascript
Made of vanilla js. This means no external framework is used.

✏️ Well documented
The documentation also contains a Modal-Generator 😍

💪 Actively maintained
The form is always up to date!

🌈 Works with all mobile and desktop browsers
Internet Explorer >= 9

🍰 Easy to use and powerful
Eating cake is harder than EinsModal 😂

😎 All type of HTML can be displayed
Yes, you can!

🚀 No JavaScript knowledge required
You just need to know how to insert HTML!

🔥 Easy to customize and extend
EinsModal contains a small amount of CSS. Means bypassing or extending it very easily! EinsModal provides everything you need to interact with it via JS. This means that there are no limits in terms of extension and use!

🌚 in-built dark theme
The dark theme is already built-in. Modifying them or adding new themes is very easy!

How to make use of 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 next JavaScript & CSS information within the HTML doc.

<link href="css/eins-modal.min.css" rel="stylesheet" />
<script src="js/eins-modal.min.js" defer></script>

3. Initialize the library on doc prepared.

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 allow the dark mode, simply add the eins-modal-dark class to the top container.

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

6. Set the scale 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 set-off button to toggle the modal window.

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

8. Customize the Open Animation:

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

9. Customize the Close Animation:

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

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

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

11. API strategies.

var options = {
  openTransition: 'transition.bounceIn',
  openTransitionDuration: 400,
  closeTransition: 'transition.expandOut',
  closeTransitionDuration: 200,
  backdropClose: true
}

// show the modal
document.getElementById('myModal').modal('show', options);

// close the modal
document.getElementById('myModal').modal('close', options);

// add a modal dynamically
modal.add(modalElementOrId, triggerElement);

// open a specific modal
modal.open(modalElementOrId, options);

// close the current modal window
modal.close(options);

// set & update options
modal.setDefaultOptions(options);

12. 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
})

Easy & Robust Modal JavaScript Library, EinsModal Plugin/Github


See Demo And Download

Official Website(EinsCMS): Click Here

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