Diálogos modales con profundidad [jQuery]

Avgrund es un plugin jQuery para la creación de diálogos modales, pero de una forma completamente distinta a la habitual. Este cambio, que lo diferencia de otras alternativas similares, es pura y exclusivamente visual, consiste en mostrar una diferencia de profundidades entre el popup y la pagina que lo contiene.

Esta nueva forma de representar diálogos modales cuenta con algunas ventajas, por un lado un excelente diseño, totalmente atractivo y moderno, y por otro una forma de resaltar el popup haciendo intervenir la pagina desde donde se lanza, esto de cara a la usabilidad es muy beneficioso.

Creación de dialogo modal con profundidad

Ejemplo básico:

$('element').avgrund();

Opciones de configuración avanzada:

$('element').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, // another animation type
	onBlurContainer: '', // enables blur filter for specified block 
	template: 'Your content goes here..'
});

Este dialogo modal jQuery funciona perfectamente en los navegadores más modernos, en estos se utiliza varias características de CSS3, como por ejemplo: transiciones y transformaciones. Sin embargo en los navegadores más antiguos (podríamos citar a Internet Explorer 6 hasta su versión 9) este plugin funciona de igual manera pero utilizando los comportamientos soportados por estos navegadores.

El plugin se encuentra testeado y requiere jQuery 1.4 o superior. El tamaño es mínimo, apenas unos 2kb en su versión simplificada.

Este original dialogo modal se encuentro liberado bajo licencia MIT.

Web: Avgrund Modal