Avgrund Modal – jQuery plugin for modal boxes and popups

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting 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 (e.g. in IE 6-9 has standard behavior). Tested with jQuery 1.4+, file size is under 2Kb.

avgrund-modal - jQuery plugin for modal boxes and popups.

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.


You can simply init Avgrund with one line and linking ‘avgrund.css’ file:


Avgrund has several options for you to customize it easily:

	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, // another animation type
	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 () { ... }, // set custom call before popin is inited..
	onUnload: function () { ... }, // ..and after it was closed
	template: 'Your content goes here..' // or function() { ... }

Avgrund plugin was inspired by Hakim's Avgrund.js <a href="https://github.com/hakimel/avgrund/" target="_blank">demo</a>.

Related post:  Responsify.js - A jQuery plugin for perfect responsive images
Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.