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';
EinsModal.init();

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>

✨ 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:

🖌️ CSS Classes

eins-modal & eins-modal-content

The

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>

eins-modal-button (Open)

Trigger that opens the modal.

Attributes

data-modal-id (required)

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

Options like "openTransition" and "closeTransition"

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

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

eins-modal-close

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

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

eins-modal-close-button

Trigger to close the modal.

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

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.

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>

⚙️ Options

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

openTransition

Opening 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

openTransitionDuration

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

closeTransition

Closing 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

closeTransitionDuration

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

backdropClose

Can be true or false. Default is true.
If false, click on backdrop will not close the modal.

🌟 Custom Javascript

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 global window.einsModal object is ready to use.

With jQuery

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

Without jQuery (Vanilla Javascript)

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

Methods

.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: 'transition.bounceIn',
  openTransitionDuration: 400,
  closeTransition: 'transition.expandOut',
  closeTransitionDuration: 200,
  backdropClose: true
}
$('#myModal').modal('show', options)

Without jQuery (Vanilla Javascript)

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

// with options
var options = {
  openTransition: 'transition.bounceIn',
  openTransitionDuration: 400,
  closeTransition: 'transition.expandOut',
  closeTransitionDuration: 200,
  backdropClose: true
}
document.getElementById('myModal').modal('show', options)

Global Object

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 some examples on how use the global object down below.

Methods of window.einsModal

add()

The main purpose of this method is to add new and dynamically created modals and/or buttons.

add(modalElementOrId : string|HTMLElement|null, triggerElementOrId : string|HTMLElement|null)

Parameters

modalElementOrId: string|HTMLElement|null

This parameter is optional.
EinsModal attaches the ".modal()" method to the element.
That element must have a child with the class "eins-modal-content".
triggerElement: HTMLElement|string|null

This parameter is optional.
EinsModal adds an "click" and "touch" Event to the element.
If parameter 1 is not null the given trigger will be assigned the modal from parameter 1.
Otherwise the trigger must have a "data-modal-id" attribute.

open()

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

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

Parameters

modalElementOrId: string|HTMLElement|null

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

This parameter is optional.
The options like "openTransition" and "closeTransition".
You can see all options on the "Options" page.

close()

Close the currently open modal.

close(options : null|object)

Parameters

options: object|null

This parameter is optional.
The options like "openTransition" and "closeTransition".
You can see all options on the "Options" page.

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

The options like "openTransition" and "closeTransition".
You can see all options on the "Options" page.

Examples

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')

  // set content text
  modalContent.html('This modal is created with JS')

  // add content 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() method to our new modal
  //    and add assign the trigger button to the modal
  window.einsModal.add(modal, trigger)
})

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'

  // set content text
  modalContent.innerHTML = 'This modal is created with JS'

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

  // add modal to body
  document.body.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.body.appendChild(trigger)

  // 3. add the .modal() method to our new modal
  //    and add assign the trigger button to the modal
  window.einsModal.add(modal, trigger)
})

🖌️ 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!

With normal CSS

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 2 + font-size of icon + border-width of icon (default is 2px) = padding of modal
In the following case: 7px 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

Configuration with variables

// your scss file

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

/* 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;
  }
}

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

Or Without Package Manager

✨ Create your own Example

Options

Additional Config

That was easy

🖌️ CSS Classes

eins-modal & eins-modal-content

Attributes

id (required)

data-options

eins-modal-button (Open)

Attributes

data-modal-id (required)

data-modal-options

eins-modal-close

eins-modal-close-button

eins-modal-dark

eins-modal-(lg|sm|xsm)

eins-modal-lg

eins-modal-sm

eins-modal-xsm

⚙️ Options

openTransition

openTransitionDuration

closeTransition

closeTransitionDuration

backdropClose

🌟 Custom Javascript

Events

show.eins.modal

shown.eins.modal

hide.eins.modal

hidden.eins.modal

global.eins.modal

With jQuery

Without jQuery (Vanilla Javascript)

Methods

.modal('show', options)

.modal('hide', options)

.modal('toggle', options)

With jQuery

Without jQuery (Vanilla Javascript)

Global Object

Methods of window.einsModal

add()

Parameters

modalElementOrId: string|HTMLElement|null

triggerElement: HTMLElement|string|null

open()

Parameters

modalElementOrId: string|HTMLElement|null

options: object|null

close()

Parameters

options: object|null

setDefaultOptions()

Parameters

options: object

Examples

With jQuery

Without jQuery (Vanilla Javascript)

🖌️ Custom CSS

With normal CSS

Change the modal width

Create a custom size class