Modal Boxes & Popups Plugin For jQuery - Avgrund Modal

File Size: 14.4 KB
Views Total: 22048
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Modal Boxes & Popups Plugin For jQuery - Avgrund Modal

Avgrund Modal is a jQuery Modal Plugin for adding beautiful Modal Boxes & Popups to your website. If you want to close modal, please hit "Esc", click somewhere on the screen or use special button.

How to use it:

1. Include Avgrund CSS to style your modal boxes

<link rel="stylesheet" href="./style/avgrund.css">

2. Markup

<a href="#" id="show">Show it</a>

3. Include both jQuery library and avgrund.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="./js/jquery.avgrund.js"></script> 

4. Call the plugin with options

<script>
$(function() {
$('#show').avgrund({
width: 380, // max is 640px
height: 280, // max is 350px
showClose: false, // switch to 'true' for enabling close button
showCloseText: '', // type your text for close button
closeByEscape: true, // enables closing popup by 'Esc'..
closeByDocument: true, // ..and by clicking document itself
holderClass: '', // lets you name custom class for popin holder..
overlayClass: '', // ..and overlay block
enableStackAnimation: false, // enables different type of popin's animation
onBlurContainer: '', // enables blur filter for specified block
openOnEvent: true, // set to 'false' to init on load
setEvent: 'click', // use your event like 'mouseover', 'touchmove', etc.
onLoad: function (elem) { ... }, // set custom call before popin is inited..
onUnload: function (elem) { ... }, // ..and after it was closed
onClosing: false, 
template: 'Your string content goes here..' // or function (elem) { ... }, or selector $('.content')
});
});
</script>

Change Logs:

v1.3.3 (2015-7-31)

  • Added onClosing method

v1.3.2 (2014-3-10)

  • add dynamic content load

v1.3.1 (2014-3-09)

  • add dynamic content load

v1.2.0 (2013-9-28)

  • Added AMD and CommonJS styles support.

v1.1.7 (2013-9-23)

  • Added support jQuery selectors in template option. Now you can create element with content inside your app
  • Better fix for overlay and long content pages, minor add-ons.

v1.1.5 (2013-6-16)

  • fix overlay issue, minor add-ons, version up

v1.1.4 (2013-5-27)

  • Few fixes

v1.1.2 (2013-2-26)

  • Webkit overlay 'transform/position:fixed/overflow' issue fix

v1.1.0 (2013-2-22)

  • A bunch of small but very useful fixes and updates

 


This awesome jQuery plugin is developed by voronianski. For more Advanced Usages, please check the demo page or visit the official website.