Simple Modal Window With Configurable Animations - jQuery PopUpBox
File Size: | 5.86 KB |
---|---|
Views Total: | 490 |
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.