Fancy Morphing Modal Popup Plugin With jQuery - beanPopper

Fancy Morphing Modal Popup Plugin With jQuery - beanPopper
File Size: 72.3 KB
Views Total:
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="">

2. Load jQuery library and jQuery easing plugin at the bottom of the html page.

<script src="" 
<script src=""></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.

  content: "<h2>Modal Content</h1>"

5. Customize the modal popup by overring the default options as shown below:


  // background color
  // accepts colorname, hex, rgb, rgba, hsl & hsla

  // 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.


  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.