Avgrund is a jquery plugin for modal boxes and popups. It uses new concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations
Avgrund is a jQuery plugin for your modal boxes and popups. It uses new concept showing depth between popup and page.
It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations.
Tested with jQuery versions 1.4+
File size of minified version is
avgrund.css file to the project:
If you use bower then you can simply install it as:
bower install jquery.avgrund
At first install plugin via NPM:
npm install jquery.avgrundnpm install jquery-browserify
In your server-side node.js (e.g. express app):
And in your browser-side you can init plugin now:
var $ = ;$;
You're also able to use some of the options that let you customize it as you wish:
More detailed information on every option you can find here.
Here is the list of available avgrund options:
Set popup width (currently stict to max
Set popup height (currently strict to max
Show/hide close button.
If you decided to show close button then you probably want to add close text to it.
Allow users to close popup by clicking
Allow users to close popup by clicking everywhere on
document (except popup of course).
Adds custom css classes to avgrund popup, example:
results in adding this class to avgrund container:
Adds custom css classes to avgrund overlay container.
Possibility to add a bit different popup hiding animation type.
Class name for container element that will be blurred when popup appears, example:
Please note that currently css
blur is not supported in all modern browsers.
If you want to show avgrund on page load set this option value to
With this option you can manage events that will open popup on certain element:
If you need to make some preparations or whatever before avgrund popup will be shown, example:
This function will be executed after popup was closed, example:
Specify your content for popin here, it can be
function that returns content itself:
Also it accepts jQuery objects (dynamic as well), so you can create element with content inside your app:
My content for popin!
and use it in
template of popin:
Check the example here: http://labs.voronianski.com/jquery.avgrund.js/
Inspired by Hakim's demo: https://github.com/hakimel/avgrund/
Added AMD and CommonJS styles support.
Added support jQuery selectors in template option.
Better fix for overlay and long content pages, minor add-ons.
Few fixes, and plugin is available as bower package now. So you can simply install it as:
A bunch of small but very useful fixes and updates, including multiple avgrund popins on a page, removing popins from DOM after deactivation (also fixed an issue to make sure avgrund close effect works) and position:fixed/transform/overflow issue for scrolled pages in -webkit.
Get 2 new useful options for popin that were missed before. Now you can set your custom functions before Avgrund dialog is open and after it was closed.
Some new updates include initializing popin without event. Also now you can set up your own event for an element. Added ability to use a custom function inside avgrund's template option. Thanks to juice49 for pull request.
New options added - disable closing popup by 'Esc' and 'Document click'. Blur css filter for browsers that support it (seems only webkit ones for now).
We still have some issues to fix and make avgrund better, if you have any suggestions raise them in issues please.