Fancy Morphing Modal Popup Plugin With jQuery - beanPopper
File Size: | 72.3 KB |
---|---|
Views Total: | 1385 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

beanPopper is a jQuery plugin to help you create fancy any content modal popups with elastic and/or ease animations.
How to use it:
1. Load Font Awesome for the modal icons.
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
2. Load jQuery library and jQuery easing plugin at the bottom of the html page.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
3. Load the jQuery beanPopper plugin's script after jQuery.
<script src="bean.popper.js"></script>
4. Call the function on the trigger element and define the html for the modal content.
$('.trigger').showPopUp({ content: "<h2>Modal Content</h1>" });
5. Customize the modal popup by overring the default options as shown below:
$('.trigger').showPopUp({ // background color // accepts colorname, hex, rgb, rgba, hsl & hsla bgColor:"#ffffff", // text color & background color of close button closeBtnColor: ["red", '#ffffff'], // height/width of the modal height: 500, // int:default 500 value in pixels width: 500, // int:default 500 value in pixels // "ease" & "elastic" animationType: "elastic" });
6. Available callback functions which will be fired after the modal popup opens and closes.
$('.trigger').showPopUp({ onAfterOpen: undefined, onAfterClose: undefined });
This awesome jQuery plugin is developed by ViiMorales. For more Advanced Usages, please check the demo page or visit the official website.