EinsModal

Dialog | Modal | Alert

The last

you will ever need!

❤️ Open Source
⚡ Created with Vanilla Javascript
✏️ Well documented
💪 Actively Maintained
😎 Can display every type of HTML
🌈 Works with all mobile and desktop Browsers

(Internet Explorer >= 9)
🚀 No Javascript knowledge required
🍰 Easy to use and robust
🔥 Easy Customization & Extension
🌚 Dark theme build in

Installation

With package manager

$ npm install eins-modal

// scss
import 'eins-modal/src/scss/style.scss'
// OR css
import 'eins-modal/dist/css/eins-modal.min.css'

// javascript
import EinsModal from 'eins-modal';
// OR
import 'eins-modal';

Type definitions for EinsModal

EinsModal also provides type definitions. They are especially useful when using Typescript.
Just use the following command to install them.

$ npm install --save-dev @types/eins-modal

Or Without Package Manager

Download

<head>
  <!-- In Head Tag -->
  <link rel="stylesheet" href="/path/to/dist/css/eins-modal.min.css">
</head>
<body>
  <!-- End Of Body -->
  <script src="/path/to/dist/js/eins-modal.min.js"></script>
</body>

EinsModal without animations

If you want a smaller file size and just need a modal you can use EinsModal without any animations.

With package manager

$ npm install eins-modal

// scss
import 'eins-modal/src/scss/style.scss'
// OR css
import 'eins-modal/dist/css/eins-modal.min.css'

// javascript
import EinsModal from 'eins-modal/src/eins-modal-plain';
// OR
import 'eins-modal/src/eins-modal-plain';

Or Without Package Manager

Download

<head>
  <!-- In Head Tag -->
  <link rel="stylesheet" href="/path/to/dist/css/eins-modal.min.css">
</head>
<body>
  <!-- End Of Body -->
  <script src="/path/to/dist/js/eins-modal-plain.min.js"></script>
</body>

✨ Examples

Create your own Example

Options

Open Animation:

Open Animation Duration:

Close Animation:

Close Animation Duration:

Close with click on backdrop:

Additional Config

Add options to:

With Close Icon:

Dark Theme:

With Close Button:

Size:

Dialog with just HTML!

You can close a modal and open another one with just using HTML.

To do that you apply the data-modal-id attribute to the eins-modal-close-button element.

You can also apply the data-modal-id attribute to the eins-modal-close or eins-modal element if you want to!

<button data-modal-id="dialog1">Open</button>

<div id="dialog1" class="eins-modal">
    <div class="eins-modal-content">
        <div class="eins-modal-close"></div>

        <!-- Your Content -->

        <button class="eins-modal-close-button" data-modal-id="dialog2">Next</button>
    </div>
</div>

<div id="dialog2" class="eins-modal">
    <div class="eins-modal-content">
        <div class="eins-modal-close"></div>

        <!-- Your Content -->

        <button class="eins-modal-close-button" data-modal-id="dialog1">Previous</button>
    </div>
</div>

Open multiple Modals

You can open infinite modals on top of each other.

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

<div id="myModal" class="eins-modal">
    <div class="eins-modal-content">
        <div class="eins-modal-close"></div>

        <!-- Your Content -->

        <button data-modal-id="myModal2">Open second Modal</button>
    </div>
</div>

<div id="myModal2" class="eins-modal">
    <div class="eins-modal-content">
        <div class="eins-modal-close"></div>

        <!-- Your Content -->

        <button class="eins-modal-close-button">OK</button>
    </div>
</div>

🖼️ HTML and 🎨 CSS

Summary

HTML
- Button
- Modal
- Close Icon
- Close Button
CSS Classes

🖼️ HTML

There are four major HTML elements.

Button (Trigger)

For any element, the only thing needed to be a trigger that opens a modal, is the data-modal-id attribute.
You can use every type of element as a trigger, not just "button"!

Attributes

data-modal-id (required)

Modal element's "id" attribute
data-modal-options

Options like "openTransition" and "closeTransition"

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

<!-- Can be used on every element, for example: -->
<div data-modal-id="">Open</div>

The actual

Attributes

id (required)

Needs to have an id.
data-options

Options like "openTransition" and "closeTransition"

<div id="myModal" class="eins-modal">
  <div class="eins-modal-content">
      <!--Your Content-->
  </div>
</div>

Close Icon

Close icon. Positioned at the top of the eins-modal-content element.

<div class="eins-modal-close"></div>

Close Button

Trigger to close the modal. Needs to be inside of eins-modal-content

<div class="eins-modal-close-button">OK</div>

🎨 CSS Classes

This CSS class is used to position the modal element vertically and horizontally centered.

This is the actual modal container. If you want to design the modal you interact with this.

The cross icon at the top right, to close the modal.

This CSS class has no styling.

Build in dark theme.

<div id="myModal" class="eins-modal eins-modal-dark">
  <div class="eins-modal-content">
      <!--Your Content-->
  </div>
</div>

The default size is 500px. You can change the size by your own with ease.
Nonetheless we have some build in classes for you.

eins-modal-lg

"max-width" is set to 600px
eins-modal-sm

"max-width" is set to 400px
eins-modal-xsm

"max-width" is set to 300px

<div id="myModal" class="eins-modal eins-modal-sm">
  <div class="eins-modal-content">
      <!--Your Content-->
  </div>
</div>

fill-scrollbar-gap

When EinsModal opens a modal, it also disables the scroll-ability of the body.
That can lead to flickering on some elements, especially on fixed elements.
For example when using a fixed header.

That flickering is most noticeable on centered elements.

You can fix that by using the fill-scrollbar-gap class.
It will apply a padding to the right when disabling the scrollbar and prevent that element from moving when opening a modal.

You can find out where this class is needed by opening a modal and looking for moving elements in the background.

PS: This class also adds the CSS attribute box-sizing: border-box to that element.
Without this attribute, padding-right would not work.

<div class="myFixedHeader fill-scrollbar-gap">
  <!-- For example your centered menu lives here -->
</div>

⚙️ Options

Summary

Options structure
Priority
openTransition
openDuration
closeTransition
closeDuration
backdropClose
multiple
wait

Options structure

If you want to use options in HTML with data-options or data-modal-options:

openTransition: bounceIn;
openDuration: 400;
closeTransition: expandOut;
closeDuration: 200;
backdropClose: true;
multiple: true;
wait: false;

If you want to use the options object with Javascript, it looks like this:

{
  openTransition: 'bounceIn',
  openDuration: 400,
  closeTransition: 'expandOut',
  closeDuration: 200,
  backdropClose: true,
  multiple: true,
  wait: false
}

Priority

With EinsModal you have the possibility to apply options in different ways.
If you apply the options multiple times, there is a priority how the options will be used. If no custom options are applied the default options will be used.

Applying options with javascript

(highest priority)
Applying options with button element
Applying options with modal element
Default options

openTransition

Opening animation.

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

openDuration

Default is 400.
The duration of the opening animation in milliseconds.

closeTransition

Closing animation.

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

closeDuration

Default is 200.
The duration of the closing animation in milliseconds.

backdropClose

Default is true.
Can be true or false.

If false, click on backdrop will not close the modal.

multiple

Default value is true.
Can be true or false.

If set to false, EinsModal will close all currently open modals, before opening the new one.

wait

Default is false.
Can be true or false.

If set to true, EinsModal wait till after the next action (open or close), before opening the new modal.

If this option is set to true as the default value, by using the setDefaultOptions() method of the "Global Object" or the "EinsModal" object (NPM).
EinsModal will always wait to open a new modal, till after a close action.

🌟 Javascript

Summary

Events
Modal Function
Global Object & EinsModal (NPM)
Example

Events

show.eins.modal

This event fires immediately when the show is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.eins.modal

This event is fired when the modal has been made visible to the user (will wait for transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.eins.modal

This event is fired immediately when the hide instance method has been called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
hidden.eins.modal

This event is fired when the modal has finished being hidden from the user (will wait for transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
global.eins.modal

This event is fired after the DOM is loaded (window.onload) and after the global window.einsModal object is ready to use.

With jQuery

$('#myModal').on('show.eins.modal', function(event){
  // do something...
})

Without jQuery (Vanilla Javascript)

document.getElementById('myModal')
  .addEventListener('show.eins.modal', function(event){
    // do something...
  })

.modal('show', options)

Open the modal.
options parameter is optional.
.modal('hide', options)

Close the modal.
options parameter is optional.
.modal('toggle', options)

Toggle between open and close.
options parameter is optional.

With jQuery

// without options
$('#myModal').modal('show')

// with options
var options = {
  openTransition: 'bounceIn',
  openDuration: 400,
  closeTransition: 'expandOut',
  closeDuration: 200,
  backdropClose: true,
  multiple: true,
  wait: false
}
$('#myModal').modal('show', options)

Without jQuery (Vanilla Javascript)

// without options
document.getElementById('myModal').modal('show')

// with options
var options = {
  openTransition: 'bounceIn',
  openDuration: 400,
  closeTransition: 'expandOut',
  closeDuration: 200,
  backdropClose: true,
  multiple: true,
  wait: false
}
document.getElementById('myModal').modal('show', options)

Global Object & EinsModal

EinsModal attaches a small "einsModal" object to the global window object.

You can listen on the window object for the "global.eins.modal" Event to use it afterwards.

We have an example on how to use the global object down below.

When using NPM you have access to the EinsModal object like this:

import EinsModal from 'eins-modal'

This EinsModal object provides the same handy methods like the global einsModal object.

open()

Open a modal using or the element or its "id".

open(modalOrId : string|HTMLElement, options : object|null)

Parameters

modalOrId: string|HTMLElement|null

The "id" or element of the modal to open.
options: object|null

This parameter is optional.
Visit the Options documentation page to learn more about the options object.

Example

window.einsModal.open('myModal')

// OR with NPM
EinsModal.open('myModal')

close()

Close the currently open modal.

close(modalOrId: string|HTMLElement|null, options : null|object)

Parameters

modalOrId: string|HTMLElement|null

This parameter is optional.
The "id" or element of the modal to close.
options: object|null

This parameter is optional.
Visit the Options documentation page to learn more about the options object.

Example

window.einsModal.close('myModal')

// OR with NPM
EinsModal.close('myModal')

addButton()

Make an element a trigger that opens a modal.

addButton(triggerOrId: HTMLElement|string, modalOrId: HTMLElement|string|null, options: object|null)

Parameters

triggerOrId: HTMLElement|string

This parameter is required.
EinsModal adds an "click" and "touch" Event to the element.
If parameter 2 is not null the given trigger will be assigned to the modal from parameter 2.
Otherwise the trigger must have a "data-modal-id" attribute.
modalOrId: string|HTMLElement|null

This parameter is optional.
If present, the given modal will be opened with the trigger from parameter 1.
options: object|null

This parameter is optional.
Options object to change the modal behavior.
Visit the Options documentation page to learn more about the options object.

Example

window.einsModal.addButton('myTrigger', 'myModal')

// OR with NPM
EinsModal.addButton('myTrigger', 'myModal')

removeButton()

Remove all events attached to the given trigger.

removeButton(triggerOrId: HTMLElement|string)

Parameters

triggerOrId: HTMLElement|string

This parameter is required.
EinsModal removes all events attached to the given trigger.

Example

window.einsModal.removeButton('myTrigger')

// OR with NPM
EinsModal.removeButton('myTrigger')

setDefaultOptions()

With this method you can override the default options.
Then every modal will use the new options as default.

setDefaultOptions(options : object)

Parameters

options: object

This parameter is required.
Visit the Options documentation page to learn more about the options object.

Example

window.einsModal.setDefaultOptions({multiple: false})

// Or with NPM
EinsModal.setDefaultOptions({multiple: false})

isOpen()

Check if a modal is open.

isOpen(modalOrId: string|HTMLElement): boolean

Parameters

modalOrId: string|HTMLElement

This parameter is required.
The "id" or the element of the modal to check.

Return value

true if modal is open. false otherwise.

Example

var modalIsOpen = window.einsModal.isOpen('myModal')

// OR with NPM
var modalIsOpen = EinsModal.isOpen('myModal')

getOpenModals()

Get a list with all modal elements that are currently open.

getOpenModals(): [HTMLElement]

Return Value

A list (array) that contains all open modals (HTMLElement).
Returns an empty array if no modals are open.

Example

var openModals = window.einsModal.getOpenModals()

// OR with NPM
var openModals = EinsModal.getOpenModals()

addModalFunction()

Add the .modal() function to to the given modal.

addModalFunction(modalOrId: string|HTMLElement)

Parameters

modalOrId: HTMLElement|string

This parameter is required
EinsModal attaches the .modal() function to the given modal.

Example

window.einsModal.addModalFunction('myModal')

// OR with NPM
EinsModal.addModalFunction('myModal')

Example

This is an example where we use the global window.einsModal object.

With jQuery

// use the global object, when its ready
$(window).on('global.eins.modal', function(){
  // create a modal with JS
  var modal = $('<div>');
  modal.attr('class', 'eins-modal')
  modal.attr('id', 'myModal')

  // create modal content element
  var modalContent = $('<div>');
  modalContent.attr('class', 'eins-modal-content')

  // insert some text into the content element
  modalContent.html('This modal is created with JS')

  // add content element to modal
  modal.append(modalContent)

  // add modal to body
  $('body').append(modal)

  /* we can now do different things */

  // 1. open the modal
  var options = { backdropClose: false }
  window.einsModal.open(modal, options)

  // 2. close the modal after 3 seconds
  setTimeout(function(){
    window.einsModal.close()
  }, 3000)

  // create a trigger button element
  var trigger = $('<button>')
  trigger.html('Open modal')

  // add the button to the page
  $('body').append(trigger)

  // 3. add the .modal() function to our new modal
  // (This is completely optional!)
  window.einsModal.addModalFunction(modal)

  // 4. assign our new trigger button to our modal
  window.einsModal.addButton(trigger, modal)
})

Without jQuery (Vanilla Javascript)

// use the global object, when its ready
window.addEventListener('global.eins.modal', function(){
  // create a modal with JS
  var modal = document.createElement('div');
  modal.className = 'eins-modal'
  modal.id = 'myModal'

  // create modal content element
  var modalContent = document.createElement('div');
  modalContent.className = 'eins-modal-content'

  // insert some text into the content element
  modalContent.innerHTML = 'This modal is created with JS'

  // add content element to modal
  modal.appendChild(modalContent)

  // add modal to body
  document.getElementsByTagName('body')[0].appendChild(modal)

  /* we can now do different things */

  // 1. open the modal
  var options = {backdropClose: false}
  window.einsModal.open(modal, options)

  // 2. close the modal after 3 seconds
  setTimeout(function(){
    window.einsModal.close()
  }, 3000)

  // create a trigger button element
  var trigger = document.createElement('button')
  trigger.innerHTML = 'Open modal'

  // add the button to the page
  document.getElementsByTagName('body')[0].appendChild(trigger)

  // 3. add the .modal() function to our new modal
  // (This is completely optional!)
  window.einsModal.addModalFunction(modal)

  // 4. assign our new trigger button to our modal
  window.einsModal.addButton(trigger, modal)
})

🖌️ Custom CSS

On this page we show you some examples on how to style EinsModal.
You can style every class mentioned in the "CSS Classes" section.
EinsModal does not restrict you in any way!

Summary

With CSS
With SCSS

With CSS

You can use standard CSS to customize EinsModal with ease.

Change the modal width

Change default width of all modals.

.eins-modal > .eins-modal-content{
  max-width: 400px;
}

Change width of one specific modal.

#myModal > .eins-modal-content{
  max-width: 400px;
}

Change width of a theme.

.eins-modal-dark > .eins-modal-content{
  max-width: 400px;
}

Create a custom size class

Dont change just the width.
Create your own size class "custom-size".
Info:
You can customize the CSS how you want. But this is a tip.
Size of the close icon shouldn't be more than the padding of the modal.
Calculation:
padding of icon x 2 + font-size of icon + border-width of icon (default is 2px) = padding of modal
In the following case: 7px x 2 + 19px + 2px = 35px

/* Size of modal */
.eins-modal.custom-size > .eins-modal-content{
  max-width: 500px;
  padding: 35px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}
/* Size of close icon */
.eins-modal.custom-size > .eins-modal-content > .eins-modal-close{
  font-size: 19px;
  width: 19px;
  padding: 7px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}

Using new size class

<div id="myModal" class="eins-modal custom-size">
  <div class="eins-modal-content">
    <!-- Your Content -->
  </div>
</div>

Add a new theme

.eins-modal-blue > .eins-modal-content {
  color: #fff;
  background: #164f69;
}
.eins-modal-blue .eins-modal-close {
  color: #abd0e2;
  border-color: #225977;
}
.eins-modal-blue .eins-modal-close:hover {
  color: #f27474;
  border-color: #163f55;
}

Using new theme

<div id="myModal" class="eins-modal eins-modal-blue">
  <div class="eins-modal-content">
    <!-- Your Content -->
  </div>
</div>

With SCSS

Customizing the Style with SCSS is really easy.

Configuration with variables

// your scss file

/* Backdrop */
$backdrop-background: rgba(0, 0, 0, 0.6);
$backdrop-z-index: 100;

/* Wrapper */
$wrapper-padding: 15px;

/* Modal General */
$width: 500px;
$width-lg: 600px;
$width-sm: 400px;
$width-xsm: 300px;

$padding: 35px;
$padding-lg: 40px;
$padding-sm: 35px;
$padding-xsm: 35px;

$border-width: 0px;
$border-style: solid;

$border-radius: 8px;
$border-radius-lg: 10px;
$border-radius-sm: 8px;
$border-radius-xsm: 8px;

/* Close icon */
$close-icon-size: 19px;
$close-icon-size-lg: 20px;
$close-icon-size-sm: 19px;
$close-icon-size-xsm: 19px;

$close-padding: 7px;
$close-padding-lg: 8px;
$close-padding-sm: 7px;
$close-padding-xsm: 7px;

$close-top: 0;
$close-right: 0;
$close-bottom: auto;
$close-left: auto;

$close-border-width: 2px;

/* Default Theme */
$font-color: #000;
$border-color: #000;
$background: #fff;

$close-color: #8f8f8f;
$close-color-hover: #f27474;
$close-border-color: #f0f0f0;
$close-border-color-hover: #dedede;

/* Dark theme */
$font-color-dark: #fff;
$border-color-dark: #000;
$background-dark: #262626;

$close-color-dark: #b5b5b5;
$close-color-hover-dark: #f27474;
$close-border-color-dark: #333333;
$close-border-color-hover-dark: #404040;

@import "~eins-modal/src/scss/style.scss";

Add a new theme with SCSS

.eins-modal-blue > .eins-modal-content {
  color: #fff;
  background: #164f69;
  .eins-modal-close {
    color: #abd0e2;
    border-color: #225977;
    &:hover {
      color: #f27474;
      border-color: #163f55;
    }
  }
}

Add a new size class with SCSS

.eins-modal.custom-size > .eins-modal-content {
  max-width: 500px;
  padding: 35px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;

  .eins-modal-close {
    font-size: 19px;
    width: 19px;
    padding: 7px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
  }
}

🎉 Release Notes

With version 2.0 the whole codebase of EinsModal got refactored and rewritten to be ready for the future.
It is now much simpler to use and provides more functionality.

To make your Upgrade from version 1.1 to 2.0 as simple as possible, use the following guide:

Upgrade from 1.1 to 2.0

Changes from 2.1 to 2.2

✨ Initialization with window.onload

The location of the script tag is no longer important.
EinsModal now initializes all elements like buttons and modals with window.onload, means after the DOM is rendered and ready.
You can now listen to the global.eins.modal event to start using EinsModal, because when it's fired all elements are fully initialized.

Changes from 2.0 to 2.1

✨ New EinsModal "plain" mode
- EinsModal without any animations
  
  If you want a smaller file size and don't need any animations you can now use eins-modal-plain.
  You can learn more on how to use EinsModal without animations here.

Changes from 1.1 to 2.0

🚨 Breaking Changes

Follow the instructions in Upgrade from 1.1 to 2.0, if you used version 1.1 before.
✨ New functionality
- Multi-Modal-Functionality
  
  Now you can open multiple Modals on top of each other without closing the current open one.
  If you want to disable that functionality you can use the multiple option.
- Queue
  
  EinsModal now has a action queue build in.
  That means it executes the close and open commands in order.
- Dialog
  
  You can now open a new modal after closing one, without using any custom javascript!
- EinsModal object (NPM)
  
  The EinsModal Object now provides many new handy methods!
- Global object
  
  The Global Object now provides many new handy methods!
- Fill Scrollbar Gap
  
  When EinsModal opens a modal, it disables the scroll-ability of the body.
  That sometimes leads to not wanted flickering.
  You can fix that by using the new fill-scrollbar-gap class.
⚙️ New Options
- multiple
  
  With option is true by default.
  By setting it to false you can disable the Multi-Modal-Functionality.
  multiple documentation
- wait
  
  With option is false by default.
  By setting it to true you can enforce that an open actions will wait until after a close action occurred.
  wait documentation
🌈 Enhancements
- Mobile scrolling
  
  If content within the modal is scrollable. It will be scrollable on mobile devices too!

Upgrade from 1.1 to 2.0

Not Breaking Changes

CSS

The class eins-modal-button is gone.

EinsModal now detects the trigger buttons simply by using the data-modal-id attribute.
Here is no action on your side needed if you don't want to.

Breaking Changes

Multi Modal Functionality

EinsModal now has Multi-Modal-Functionality.
That means if you open a new modal, EinsModal no longer close the previous open modal by default.

If you want to achieve such an behavior, just set the new multiple option to false.

To do that you have different possibilities:

You can set that option as a new default by using the setDefaultOptions() method of the "Global Object" or the "EinsModal" object (NPM).
You can set that option with HTML using the data-options and data-modal-options attributes.
You can set that option when using Javascript with the options object.

Options (HTML / Javascript)

transition. is no longer prepend to the openTransition and closeTransition options

Search for all occurrences of transition. in your code and remove it.
The option openTransitionDuration got renamed

Search for all occurrences of openTransitionDuration and rename it to openDuration
The option closeTransitionDuration got renamed

Search for all occurrences of closeTransitionDuration and rename it to closeDuration

Javascript

EinsModal.init() is no longer needed when using NPM

If you use NPM. Simply remove that line.
If you removed the eins-modal-button class from all trigger elements

And you used it as a selector yourself, you need to change all getElementsByClassName('eins-modal-button') selectors to querySelectorAll('[data-modal-id]')
Global Object - add() method is removed

Use addModalFunction() and addButton() instead.
Global Object - close() method has changed

The close() method now takes options as the second parameter, not as the first parameter.
As the first parameter you can now specify a modal to close.

EinsModal

Dialog | Modal | Alert

Beautiful 😍

❤️ Open Source

⚡ Created with Vanilla Javascript

✏️ Well documented

💪 Actively Maintained

😎 Can display every type of HTML

🌈 Works with all mobile and desktop Browsers

🚀 No Javascript knowledge required

🍰 Easy to use and robust

🔥 Easy Customization & Extension

🌚 Dark theme build in

Installation

With package manager

Type definitions for EinsModal

Or Without Package Manager

EinsModal without animations

With package manager

Or Without Package Manager

✨ Examples

Summary

Create your own Example

Options

Additional Config

That was easy

Dialog with just HTML!

First Modal

Second Modal

Open multiple Modals

Without closing?

Yes!Without closing!

🖼️ HTML and 🎨 CSS

Summary

🖼️ HTML

Button (Trigger)

Attributes

data-modal-id (required)

data-modal-options

Modal

Attributes

id (required)

data-options

Close Icon

Close Button

🎨 CSS Classes

eins-modal

eins-modal-content

eins-modal-close

eins-modal-close-button

eins-modal-dark

eins-modal-(lg|sm|xsm)

eins-modal-lg

eins-modal-sm

eins-modal-xsm

fill-scrollbar-gap

⚙️ Options

Summary

Options structure

Priority

Applying options with javascript

Applying options with button element

Applying options with modal element

Default options

openTransition

openDuration

closeTransition

closeDuration

backdropClose

multiple

wait

🌟 Javascript

Summary

Events

show.eins.modal

shown.eins.modal

hide.eins.modal

hidden.eins.modal

global.eins.modal

With jQuery

Yes!
Without closing!