Simple Modal Window With Configurable Animations - jQuery PopUpBox

Simple Modal Window With Configurable Animations - jQuery PopUpBox
File Size: 5.86 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery based popup box plugin to create modal windows with configurable open/close animations.

Features:

  • CSS less (CSS in JS).
  • Rotate & Scale animations.
  • Allows you to specify the direction in which the animation starts.
  • Fullscreen mode.
  • Easy to implement with a single JS call.

How to use it:

1. Download the library and include the JavaScript file jquery.popupmodalbox.js after jQuery.

<script src="/path/to/latest/jquery.min.js"></script>
<script src="./jquery.popupmodalbox.js"></script>

2. Initialize the popup box plugin nd define the content (HTML content is supported) to be displayed in the modal.

$("body").popupbox({
  heading: "Modal Title",
  text: "<b>Modal Body</b>"
});

3. Customize the appearance of the modal window.

$("body").popupbox({
  heading: "Modal Title",
  text: "<b>Modal Body</b>",
  bgColor: "darkgrey",
  color: "White",
  boxShadow: "0px 0px 10px black",
  fullScreen: false
});

5. Config the animations as per your needs.

  • direction: "frombottom", "fromtop", "fromright", "fromleft"
  • animation: "scale", "rotate"
$("body").popupbox({
  heading: "Modal Title",
  text: "<b>Modal Body</b>",
  direction: "frombottom",
  startanimation: "rotate",
  duration: 0.5,
  endanimation: "scale"
});

This awesome jQuery plugin is developed by ibraveboy. For more Advanced Usages, please check the demo page or visit the official website.