IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Sortie de Avgrund Modal :
Le plugin jQuery pour vos boîtes modales et popups

Le , par vermine
5 commentaires

4PARTAGES

2  0 
Sortie de Avgrund Modal
le plugin jQuery pour vos boîtes modales et popups.

Ce plugin, créé par Dmitri Voronianski, ajoute une impression de profondeur à la page lorsque vous affichez une boîte modale. Le contenu principal fait un zoom arrière (il rétrécit) et se grise. Il fonctionne dans tous les navigateurs récents.

Simple d'utilisation, vous n'avez qu'à appeler ce code :

Code javascript : Sélectionner tout 
$('element').avgrund();

Il faut également ajouter le CSS :

Code html : Sélectionner tout 
<link rel="stylesheet" href="path/to/your/avgrund.css">

Toutefois, il vous est possible de préciser une série d'options :

Code javascript : Sélectionner tout 
1
2
3
4
5
6
7
8
9
10
$('element').avgrund({			 
	width: 380, // max 640px 
	height: 280, // max 350px 
	showClose: false, // passer à 'true' pour ajouter le bouton de fermeture  
	showCloseText: '', // le texte du bouton de fermeture 
	holderClass: '', 
	overlayClass: '', 
	enableStackAnimation: false, 
	template: 'Le contenu...' 
});

Cette idée vient du concept de Avgrund créé par Hakim El Hattab.

Démo et présentation.
Télécharger les sources.
D'après un article sur DailyJS. Cet article parle également de jQuery Color 2.1.0.

Une erreur dans cette actualité ? Signalez-nous-la !

5 commentaires
Commenter Signaler un problème
dkmix
Avatar de dkmix
Membre éprouvé https://www.developpez.com
Le 29/08/2012 à 11:26
très sympa l'effet
0  0 
transgohan
Avatar de transgohan
Expert éminent https://www.developpez.com
Le 29/08/2012 à 13:18
A noter qu'il est tout à fait compatible sur d'anciennes versions de navigateurs.
Testé à l'instant sous FF 3.6 et il fonctionne.
C'est juste qu'on a pas la transition (pas d'effet) et qu'on a directement l'application du zoom.
0  0 
Jérôme Lambert
Avatar de Jérôme Lambert
Rédacteur https://www.developpez.com
Le 29/08/2012 à 14:08
Je viens d'esssayer sous IE10 en mode IE8 et IE7 et ça ne fonctionne pas. Sous IE10 en mode IE9, il n'y a pas l'effet au niveau du zoom et l'arrière plan n'est pas flooté. C'est dommage.
0  0 
alex_vino
Avatar de alex_vino
Membre émérite https://www.developpez.com
Le 30/08/2012 à 21:54
Citation Envoyé par Jérôme Lambert Voir le message
Je viens d'esssayer sous IE10 en mode IE8 et IE7 et ça ne fonctionne pas. Sous IE10 en mode IE9, il n'y a pas l'effet au niveau du zoom et l'arrière plan n'est pas flooté. C'est dommage.
Oui pas d'effet sous IE9, et pas tres longue a charger.
Sinon effet plutot sympa en effet

Par contre la compatibilité est un minimum, donc plugin non-utilisable tant qu'ils ne fixent pas cela.
0  0 
skybuck
Avatar de skybuck
Membre à l'essai https://www.developpez.com
Le 07/09/2012 à 18:19
interressant c'est ce que je cherche
mais est il possible de le modifier pour que cela s'ouvre automatiquement, par xemple sur la page d'accueil d'un site, sans avoir a cliquer sur un bouton
... et si oui quelqu'un pourrait il me montrer car je n'arrive pas a le faire
0  0