Animated Modal Window Popup Library In Pure JavaScript | ModalJS

ModalJS JavaScript modal library that helps you create an animated, dynamic and customizable popup on a web page.

animated modal popup using jquery, popup animation css, bootstrap modal popup animation effects, modal popup in html, css modal popup animation

Bootstrap Popover Extended with Modal Properties Using jQuery Plugin

How to make use of it:

1. Ensure that Modal.css and Modal.js are loaded correctly on the webpage.

<link href="src/Modal.css" rel="stylesheet">
<script src="src/Modal.js"></script>

2. Display a modal window when the page is loaded.

ModalJS.show({
  top: 'Modal Title',
  middle: 'Modal Content (innerHTML is supported)'
});

3. Toggle the modal window by clicking on the trigger element.

<input id="demo" type="button" value="Open The Modal">
ModalJS.addEvent(
  demo, 'click',
  function()
  {
      ModalJS.show({
        top: 'Modal title',
        middle: 'Modal content'
      });
  }
);

4. More configuration options.

ModalJS.show({
  top: 'Modal Title',
  middle: 'Modal Content (innerHTML is supported)',
  bottom: 'Modal Footer',
  transiiton: 'fast', // 'slow', 'fast' or 'normal',
  background: true, // displays background overlay
  mono: true // displays mono
});

5. Show/hide the modal window manually.

ModalJS.showModal()
ModalJS.hideModal()

Read More – [Corner] Fully Customizable Popup Box of Browser Window

ModalJS.modal(type)

Returns element of the modal depending on the element:

  • bg
  • modals
  • modal
  • top
  • topCancel
  • middle
  • bottom
  • bottomCancel
  • bottomConfirm
  • transitionType

Easy Animated Modal Window Library, ModalJS Plugin/Github


See Demo And Download

Official Website(patrik-herman): Click Here

This superior jQuery/javascript plugin is developed by patrik-herman. For extra Advanced Usage, please go to the official website.

Share