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.

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.