EinsModal

Dialog | Modal | Alert

The last
you will ever need!

Beautiful 😍

Insert every type of HTML

Customizing the style is so easy

Works with every Browser
(IE >= 9)

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

Summary


Create your own Example

Options

Additional Config

That was easy


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>

First Modal

Creating a Dialog is very easy.

Second Modal

Yes! It is so easy!


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>

Without closing?

You can open multiple modals.
They will stack ontop each other

Yes!
Without closing!

This can be handy in many ways!

🖼️ HTML and 🎨 CSS

Summary


🖼️ 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

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

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

Modal

The actual

Attributes

<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

eins-modal

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


eins-modal-content

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


eins-modal-close

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


eins-modal-close-button

This CSS class has no styling.


eins-modal-dark

Build in dark theme.

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

eins-modal-(lg|sm|xsm)

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

<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

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.

  1. Applying options with javascript

    (highest priority)

  2. Applying options with button element

  3. Applying options with modal element

  4. Default options


openTransition

Opening animation.


openDuration

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


closeTransition

Closing animation.


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

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 Function

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

  1. modalOrId: string|HTMLElement|null

    The "id" or element of the modal to open.

  2. 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

  1. modalOrId: string|HTMLElement|null

    This parameter is optional.
    The "id" or element of the modal to close.

  2. 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

  1. 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.

  2. modalOrId: string|HTMLElement|null

    This parameter is optional.
    If present, the given modal will be opened with the trigger from parameter 1.

  3. 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

  1. 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

  1. 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

  1. 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

  1. 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

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:

Changes from 2.1 to 2.2

Changes from 2.0 to 2.1

Changes from 1.1 to 2.0

Upgrade from 1.1 to 2.0

Not Breaking Changes

CSS

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:

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

Options (HTML / Javascript)

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

    Search for all occurrences of transition. in your code and remove it.

  2. The option openTransitionDuration got renamed

    Search for all occurrences of openTransitionDuration and rename it to openDuration

  3. The option closeTransitionDuration got renamed

    Search for all occurrences of closeTransitionDuration and rename it to closeDuration

Javascript

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

    If you use NPM. Simply remove that line.

  2. 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]')

  3. Global Object - add() method is removed

    Use addModalFunction() and addButton() instead.

  4. 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.