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

ModalJS.modal(type)

Returns element of modal depending on 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 Usages, please go to the official website.