Simple to use modal / alert / dialog / popup. Created with vanilla JS. No javascript knowledge required! Works on every browser and device! IE9

Related tags

Modals and Popups alert modal dialog vanilla-javascript npm-package popup vanilla-js ie9 easy-to-use modal-plugin
Overview

EinsModal

License: MIT

The last modal / alert / dialog you will ever need!

Full Documentation: https://www.einscms.com/modal

EinsModal is the best solution to interact with your users.

It works on every browser and device! (Internet Explorer >= 9)

"Eins" is german and means "one".

This software is part of the Eins-Software-Family.

Every Eins-Software-Product aims to be the one and only software solution you will ever need regarding its task.

Features

  • ⚡ Created with Vanilla Javascript

    Created with vanilla js. Means no external framework used.

  • ✏️ Well documented

    The documentation also has a Modal-Generator 😍

  • 💪 Actively Maintained

    The software is always up to date!

  • 🌈 Works with all mobile and desktop Browsers

    Internet Explorer >= 9

  • 🍰 Easy to use and robust

    Eating a cake is more difficult than using EinsModal 😂

  • 😎 Can display every type of HTML

    Yes, it can!

  • 🚀 No Javascript knowledge required

    You just need to know how to insert HTML!

  • 🔥 Easy to Customize & Extend

    EinsModal has just a small amount of CSS. Means overriding it or extending it very easy!

    You can also use the SCSS file if you want to.

    EinsModal provides everything you need to interact with it via JS. Means there are no limits regarding extending and using!

  • 🌚 Dark theme build in

    Dark theme is already build in. Modifying it or adding new themes is very easy!

Installation

With NPM

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

Without NPM

Download

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

Author

License

This project is open source and available under the MIT License.

You can find Examples and more here:

https://www.einscms.com/modal

You might also like...

:zap: Simple and easy to use lightbox script written in pure JavaScript

:zap: Simple and easy to use lightbox script written in pure JavaScript

baguetteBox.js Simple and easy to use lightbox script written in pure JavaScript. Demo page Table of contents Features Installation Importing Usage Cu

Jan 3, 2023

Bootstrap-Lightbox - Simple & lightweight lightbox for Bootstrap 5

Bootstrap-Lightbox Simple & lightweight lightbox for Bootstrap 5 Basic Usage Adding data-modal="bs-lightbox" in your A href tag. a data-modal="bs-lig

Oct 11, 2022

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

fancyBox jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. See the project page for doc

Jan 2, 2023

Light and responsive lightbox script with focus on performance.

Magnific Popup Repository Fast, light and responsive lightbox plugin, for jQuery and Zepto.js. Documentation and getting started guide. Examples and p

Jan 2, 2023

Touch-friendly image lightbox for mobile and desktop

Touch-friendly image lightbox for mobile and desktop

Jan 5, 2023

This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.

This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.

Jquery-SingleImagePopup This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way

Aug 22, 2022

⛔️ DEPRECATED - Dependency-free notification library that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog.

⛔️ DEPRECATED - Dependency-free notification library that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog.

DEPRECATED This repository is no longer supported, please consider using alternatives. Dependency-free notification library. Documentation » Hi NOTY i

Dec 21, 2022

react-dialog is a custom react hook to use a dialog easily

react-dialog react-dialog is a custom react hook to use a dialog easily. Documentation To use react-dialog follow the documentation. useDialog Returns

Mar 29, 2022

Custom alert box using javaScript and css. This plugin will provide the functionality to customize the default JavaScript alert box.

customAlertBoxPlugin Custom Alert Box Plugin Using JavaScript and CSS Author: Suraj Aswal Must Include CSS Code/Default Custom Alert Box Class: /* mus

Sep 10, 2022

A Powerful and Elegant "alert" library for JavaScript that replaces that boring alert style of Javascript.

A Powerful and Elegant

A Powerful , Elegant and fully customizable "alert" library using JavaScript that replaces that boring style of alert. Installation Place the below sc

Aug 10, 2021

It's an alert library build with JavaScript. You can replace your traditional JavaScript alert, confirm and toast with the library.

asteroid-alert It's an alert library build with JavaScript. You can replace your traditional JavaScript alert, confirm with the library. It has also e

Mar 12, 2021

Lightweight vanilla js modal component (just 2kb) , pure javascript Modal

Lightweight vanilla js modal component (just 2kb) pure javascript Modal , This is just 2kb Lightweight vanilla js modal component with zero dependenci

Dec 12, 2022

A very lightweight and flexible accessible modal dialog script.

A11y Dialog This is a lightweight (1.3Kb) yet flexible script to create accessible dialog windows. Documentation ↗ Demo on CodeSandbox ↗ Features: Clo

Jan 2, 2023

Accessible modal dialog component for React

react-modal Accessible modal dialog component for React.JS Table of Contents Installation API documentation Examples Demos Installation To install, yo

Jan 1, 2023

Toggle the state of a UI element to easily create components e.g. collapse, accordion, tabs, dropdown, dialog/modal.

Tiny UI Toggle Toggle the state of a UI element to easily create components e.g. collapse, accordion, tabs, dropdown, dialog/modal. Demo and documenta

Dec 22, 2022

Device.js is a JavaScript library to detect device, viewport, and browser information using plain JavaScript.

Device.js Device.js is a JavaScript library to detect device, viewport, and browser information using plain JavaScript. Compatibility Works with all m

Dec 16, 2022

A simple Chromium browser extension to every so often Rickroll yourself. Every link you click has a 1% chance of being a Rickroll.

Rick Rollette A simple Chromium browser extension to every so often Rickroll yourself. Every link you click has a 1% chance of being a Rickroll. How t

Jun 9, 2022

Snowfall effect written in pure JavaScript. No additional libraries, no dependencies. Works in every modern browser.

pureSnow.js Snow falling slowly on a winter night. Probably the most calming and peaceful snowfall effect written in pure JS/CSS. (No SCSS). Inspired

Dec 29, 2022

🖱or ⌨️? 🤷‍♀️, but hopefully use-hover-state works on the "user intent" not the "device"

useHoverState() The one aware of keyboard navigation as well 😉 npm i use-hover-state A React hook for tracking user interaction with the DOM elements

Aug 11, 2022
Releases(2.2.2)

  • 2.2.2(Sep 16, 2021)

  • 2.2.1(Aug 8, 2021)

  • 2.2.0(Jul 26, 2021)

    • ✨ Initializes with window.onload

      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.
    Source code(tar.gz)
    Source code(zip)

  • 2.1.0(Jun 30, 2021)

    • ✨ 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.
    Source code(tar.gz)
    Source code(zip)

  • 2.0.0(Jun 28, 2021)

    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!
    Source code(tar.gz)
    Source code(zip)

  • 1.1.8(Jun 20, 2021)

  • 1.1.7(Jun 20, 2021)

  • 1.1.6(Jun 20, 2021)

  • 1.1.5(Jun 20, 2021)

  • 1.1.4(Jun 20, 2021)

  • 1.1.2(Jun 19, 2021)

  • 1.1.1(Jun 19, 2021)

  • 1.1.0(Jun 19, 2021)

  • 1.0.2(Jun 19, 2021)

Owner
EinsCMS
The one and only software solution you will ever need.
EinsCMS
GitHub https://www.einscms.com/modal
A simple vanilla and lightweight modal which is easy to expand

A simple vanilla and lightweight modal which is easy to expand

null 1 Jul 3, 2022
A beautiful replacement for JavaScript's "alert"

A beautiful replacement for JavaScript's "alert" Installation $ npm install --save sweetalert Usage import swal from 'sweetalert'; swal("Hello world!

Tristan Edwards 22.2k Dec 31, 2022
A modern dialog library which is highly configurable and easy to style. #hubspot-open-source

vex Demo Documentation vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You'll love vex because

HubSpot 6.9k Jan 5, 2023
A modern dialog library which is highly configurable and easy to style. #hubspot-open-source

vex Demo Documentation vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You'll love vex because

HubSpot 6.9k Apr 1, 2021
A modal built with pure CSS, enhanced with JavaScript

CSS Modals Modals built out of pure CSS Please visit the website to read more about this project and refer to the FAQ in case of a question. What is i

Hans Christian Reinl 1.8k Dec 22, 2022
Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

Note: Since this plugin was created to solve a lot of the issues with BS2, it still uses the BS2 markup syntax. Currently I believe the default BS3 mo

Jordan Schroter 5k Dec 28, 2022
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.

jBox jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more. Demo: https://stephanwagner.

Stephan Wagner 1.4k Dec 15, 2022
Elegant, responsive, flexible and lightweight modal plugin with jQuery.

iziModal Elegant, responsive, flexible and lightweight modal plugin with jQuery. izimodal.marcelodolza.com Fast Responsive Animated Lightweight Custom

Marcelo Dolza 2.1k Dec 30, 2022
Avgrund is jQuery plugin with new modal concept for popups

Avgrund Avgrund is a jQuery plugin for your modal boxes and popups. It uses new concept showing depth between popup and page. It works in all modern b

Dmitri Voronianski 1.8k Dec 14, 2022
The simplest possible modal for jQuery

A simple & lightweight method of displaying modal windows with jQuery. For quick examples and demos, head to jquerymodal.com. Why another modal plugin

Kyle Fox 2.5k Dec 29, 2022