Fancy Morphing Modal Popup Plugin With jQuery - beanPopper

Fancy Morphing Modal Popup Plugin With jQuery - beanPopper

beanPopper is a jQuery plugin to help you create fancy any content modal popups with elastic and/or ease animations.

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.

  • Publication date: 13.03.2018
  • Source