Fenêtre modale CSS js. Fenêtres modales utilisant CSS. Ou peut-être que cela vous intéressera
Encore une fois, j'aborde le sujet de la création de fenêtres modales (pop-up). Dernièrement, je m'intéresse de plus en plus à diverses techniques permettant d'exécuter des fenêtres pop-up, sans utiliser de javascript, de plugins jQuery, etc. La possibilité d’utiliser des styles épurés et le potentiel infini des nouvelles fonctionnalités CSS3 sont plus intéressants.
Basés sur les développements de certains bourgeois respectés, ce sont des gars rusés à cet égard, ils obtiennent de bons résultats en termes de création de fenêtres modales en utilisant CSS3. La tâche est tout d'abord d'obtenir une compatibilité plus ou moins stable entre navigateurs du résultat final, et bien sûr, avec le moins de pertes, de réduire la quantité totale de code, tant en HTML qu'en CSS, afin de faciliter la vie des travailleurs qui souffrent depuis longtemps dans la création de sites Web.
Ce qui se passe au final, je l'ai à cet égard aujourd'hui, nous le verrons, et en même temps, nous apprendrons comment créer des fenêtres modales pop-up en utilisant la « magie » de CSS3.
Pour commencer, tous ceux qui sont intéressés par ce sujet, vous pouvez regarder un exemple du fonctionnement des fenêtres modales dans différentes versions et télécharger les sources :
Cette leçon ne doit pas être considérée comme un guide d'action, car à ce stade, il n'était possible d'obtenir un support fiable que par les navigateurs modernes (IE 9+, Firefox, Safari, Opera, Chrome). Considérant que les anciennes versions du navigateur IE sont encore très populaires parmi les utilisateurs, je recommande de considérer cet article comme une sorte d'expérience, une démonstration des capacités de CSS3.
Bon, passons maintenant directement à la disposition réelle du code html et au style de notre fenêtre modale en utilisant css3)))
Étape 1. HTMLTout d’abord, créons un balisage HTML de base. Comme vous pouvez le constater, la conception de base est assez simple, si l'on considère le balisage HTML des fenêtres modales et les boutons (liens) pour les activer. Chaque fenêtre modale n'est rien de plus qu'un conteneur standard, avec un certain contenu à l'intérieur et un bouton « Fermer », formé exclusivement à l'aide de CSS.
Ouvrir la fenêtre 1 Ouvrir la fenêtre 2 Vidéo dans la fenêtre 3 Photo dans la fenêtre 4 Ici, vous pouvez placer n'importe quel contenu, texte avec des images ou des vidéos ! Titre Ici, vous insérez votre vidéo ou à partir de toute ressource tierce, YouTube, Vimeo, etc. (iframe, embed)...
Dans l'exemple de code ci-dessus, pour plus de clarté, j'ai écrit de brèves explications dans les conteneurs des fenêtres modales. Par analogie, il vous suffit de placer n'importe lequel de vos contenus dans le conteneur div de la fenêtre contextuelle, qu'il s'agisse de simples textes, d'images ou de vidéos provenant de n'importe quelle ressource tierce, YouTube, Vimeo, etc. Vous pouvez créer des liens pour appeler le texte des fenêtres modales ou les concevoir comme de merveilleux boutons dégradés, comme dans l'exemple.
Étape 2 : CSSL'étape suivante, c'est la chose la plus intéressante, il est important de préparer tous les styles nécessaires pour notre fenêtre modale, de concevoir l'apparence et d'ajouter des fonctionnalités. J'ai omis les styles de page de base afin de ne pas semer la confusion, et pour plus de clarté, j'ai dilué certaines règles avec des commentaires :
/* Styles de base pour le calque d'ombre et le modal */ .overlay ( haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; z-index : 1 ; visibilité : caché ; /* fond d'ombre */ background-color : rgba(0, 0, 0, 0.7); opacité : 0 ; position : fixe ; /* positionnement fixe */ curseur : par défaut ; /* type de curseur */ -webkit-transition : opacité .5s ; -moz-transition : opacité 0,5 s ; -ms-transition : opacité 0,5 s ; -o-transition : opacité 0,5 s ; transition : opacité 0,5 s ; ) .overlay:target ( visibilité : visible ; opacité : 1 ; ) .is-image ( haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; affichage : bloc ; marge : auto ; largeur : 100 % ; hauteur : auto ; /* arrondir les coins des images intégrées */ -webkit-border-radius : 4px ; -moz- border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; ) /* éléments m-media intégrés, cadres */ embed, iframe ( haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; affichage : bloc ; marge : auto ; largeur minimale : 320 px ; largeur maximale : 600 px ; largeur : 100 % ; ) .popup h1 ( /* en-tête 1 */ couleur : #008000 ; alignement du texte : gauche ; text-shadow : 0 1px 3px rgba(0,0,0,.3); police:24px "Trebuchet MS", Helvetica, sans empattement; poids de la police : gras ; ) .popup h2 ( /* en-tête 2 */ couleur : #008000 ; alignement du texte : gauche ; ombre du texte : 0 1px 3px rgba(0,0,0,.3) ; police : 22px "Trebuchet MS", Helvetica , sans-serif; ) /*** Formation de styles de fenêtre modale ***/ .popup ( haut : 0 ; droite : 0 ; gauche : 0 ; taille de police : 14px ; z-index : 10 ; affichage : bloc ; visibilité : caché ; marge : 0 auto ; largeur : 90 % ; largeur minimale : 320 px ; largeur maximale : 600 px ; /* positionnement fixe, fenêtre stable lors du défilement */ position : fixe ; remplissage : 15 px ; bordure : 1px solide #383838 ; /* arrondi des coins */ -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background-color: #FFFFFF; /* externe ombre de la boîte */ -webkit-box-shadow : 0 0 6px rgba(0, 0, 0, 0.8); -moz-box-shadow : 0 0 6px rgba(0, 0, 0, 0.8); -ms-box -shadow : 0 0 6px rgba(0, 0, 0, 0.8); -o-box-shadow : 0 0 6px rgba(0, 0, 0, 0.8); box-shadow : 0px 0px 6px rgba(0, 0 , 0, 0.8); /* transparence totale de la fenêtre, apparaît lorsque vous cliquez dessus */ opacité : 0 ; /* effet de transition (apparence) */ -webkit-transition : toute facilité .5s ; -moz-transition : toute facilité 0,5 s ; -ms-transition : toutes facilités 0,5 s ; -o-transition : toute facilité 0,5 s ; transition : toutes facilités 0,5 s ; ) /* activer l'apparence de la fenêtre et assombrir l'arrière-plan */ .overlay:target+.popup ( top : 20%; /* position de la fenêtre depuis le haut de la page lorsqu'elle apparaît */ visibilité : visible ; opacité : 1; /* supprimer la transparence */ ) / * former le bouton de fermeture */ .close ( position : absolue ; haut : -10px ; droite : -10px ; remplissage : 0 ; largeur : 20px ; hauteur : 20px ; bordure : 2px solide #ccc; -webkit-border-radius : 15px ; -moz-border-radius : 15px; -ms-border-radius : 15px; -o-border-radius : 15px; border-radius : 15px; couleur d'arrière-plan : rgba (61, 61, 61, 0. 8); -webkit-box-shadow : 0px 0px 10px #000 ; -moz-box-shadow : 0px 0px 10px #000 ; ombre de la boîte : 0px 0px 10px #000 ; alignement du texte : centre ; décoration de texte : aucune ; poids de la police : gras ; hauteur de ligne : 20 px ; /* définit les valeurs et l'effet de transition au survol */ -webkit-transition : all easy .8s ; -moz-transition : toute facilité .8s ; -ms-transition : toute facilité 0,8 s ; -o-transition : toute facilité 0,8 s ; transition : toutes facilités 0,8 s ; ) .close:before ( couleur : rgba(255, 255, 255, 0.9); contenu : "X" ; ombre du texte : 0 -1px rgba(0, 0, 0, 0.9); taille de police : 12px; ) .close:hover ( background-color: rgba(252, 20, 0, 0.8); /* faites pivoter le bouton en survol */ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); - ms -transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); ) /* facultatif lors de l'ajout de pièces jointes */ .popup p, .popup div ( margin-bottom: 10px; )
Comme vous pouvez le constater, chers amis, tout est assez simple et il n’y a pas de confusion inutile. Si vous faites tout correctement, vous recevrez dans votre arsenal une magnifique fenêtre contextuelle modale dans laquelle vous pourrez placer n'importe quel contenu, qu'il s'agisse de texte, de photographies, de divers formulaires d'inscription et de commentaires, ou de vidéos provenant de toute source tierce. Expérimentez avec les paramètres, modifiez la fenêtre à votre guise et, si possible, partagez vos expériences, ainsi que les problèmes qui surviennent soudainement, dans les commentaires.
De nos jours, pour divers sites, toutes sortes de fenêtres modales pop-up - popups - pour l'enregistrement, l'autorisation, les fenêtres d'information - de toutes sortes de formes et de tailles sont devenues la norme. Il existe également un grand nombre de plugins, en plus de jQuery , pour une création simple et pratique de telles popups - la même Shadowbox, par exemple.
L'apparence, la taille et le design de ces pop-ups sont complètement différents - avec une superposition, des ombres, des animations - on ne peut pas tout compter. La seule chose qu'ils ont en commun est peut-être le fait qu'ils sont généralement affichés au centre même de la page - à la fois horizontalement et verticalement. Et ce centrage se fait à l'aide de JS. Je n'entrerai pas dans le détail de ces calculs, je ne les décrirai que brièvement :
Le code HTML d'une popup a généralement la structure suivante :
... -- Popup avec du contenu -->
Et CSS ( ici et ci-dessous, j'omettrai délibérément d'écrire certaines propriétés qui ne sont nécessaires que pour certains navigateurs et leurs versions, ne laissant que les plus basiques):
Popup__superposition (
poste : fixe ;
gauche : 0 ;
haut : 0 ;
arrière-plan : #000 ;
opacité : 0,5 ;
filtre : alpha(opacité=50 );
indice z : 999
}
.surgir(
position : absolue ;
largeur : 20 % ;
indice z : 1000 ;
bordure : 1px solide #ccc ;
fond : #fff
}
JS détermine le navigateur et la version du navigateur, et sur cette base, il calcule la taille de l'espace de travail et la taille de la fenêtre contextuelle elle-même (si elles ne sont pas spécifiées), puis des calculs simples de la position de son coin supérieur gauche sont effectués ( propriétés CSS à gauche et en haut pour .popup). De nombreux plugins réagissent également au redimensionnement des pages, en recalculant le tout à chaque fois pour que le popup se situe exactement au centre de l'espace de travail.
Je suis perfectionniste de nature (je sais, parfois c'est une mauvaise chose), et je m'inquiète souvent même des petits détails, essayant d'améliorer et d'ajouter le maximum d'extensibilité possible à ces détails, et je ne pouvais m'empêcher d'être accro. ce point particulier dans le travail de tous ces plugins. L'idée est née que tout le travail de positionnement d'une fenêtre contextuelle peut être transféré des épaules de JS vers les épaules du navigateur lui-même, c'est-à-dire que ce travail peut être effectué en utilisant CSS.
C'est ce que nous ferons.
Ci-dessous, je vais donner un exemple de popup qui fonctionne dans toutes les versions majeures des principaux navigateurs. Pour que cela fonctionne correctement dans IE
<
div
class
="popup">
Et du CSS :
Popup__superposition (
poste : fixe ;
gauche : 0 ;
haut : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
indice z : 999
}
.surgir(
}
Surgir (
gauche : 50 % ;
haut : 50 % ;
largeur : 400 px ;
hauteur : 200px ;
marge-gauche : -200px ;
marge supérieure : -100px
}
Les marges négatives de la moitié de la largeur et de la hauteur sont banales et ennuyeuses, cela n'a rien d'original.
La taille de la fenêtre contextuelle dépend du contenu. Premièrement, l'alignement horizontal - cela semble être plus facile. Si la popup a une largeur fixe, alors ce qui suit sera suffisant :Surgir (
marge : automatique
}
Cela n'affectera en rien l'alignement vertical et, soit dit en passant, si seul l'alignement horizontal vous suffit, vous pouvez vous arrêter là, en spécifiant une autre marge supérieure de la fenêtre contextuelle. Mais cela ne nous suffit pas ! Poursuivre.
Alignement vertical. C'est là que ça devient intéressant. Bien sûr, une table ou une émulation de table utilisant display: table & display: table-cell pourrait gérer cette tâche sans aucun problème, mais faire fonctionner cela dans un ancien IE est plus coûteux. Le tableau disparaît également – pour des raisons évidentes.
Ainsi, la marge n’est plus nécessaire – nous ne connaissons pas les tailles. Rappelons quelles propriétés ont des effets similaires. Oui, alignez le texte. Mais uniquement pour les éléments en ligne. D'ACCORD. Il semble que Dieu lui-même ait ordonné l'utilisation de display: inline-block - un élément de bloc auquel les propriétés des éléments en ligne pourraient être appliquées. Avec la prise en charge de cette propriété dans tous les navigateurs, tout est également en ordre. Le code devient quelque chose comme ceci :
Popup__superposition (
poste : fixe ;
gauche : 0 ;
haut : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
indice z : 999 ;
alignement du texte : centre
}
.surgir(
affichage : bloc en ligne ;
alignement vertical : milieu
}
Ce qui reste, c'est l'alignement vertical - l'alignement vertical fera l'affaire pour nous. Dans toute autre situation, il serait également approprié d'utiliser la hauteur de ligne, mais comme nous n'avons pas de hauteur de page fixe (hauteur de ligne dans ce contexte), elle ne peut pas être utilisée ici. Une astuce qui vient à la rescousse est l’alignement vertical d’éléments de tailles inconnues. Je me souviens exactement d’avoir trouvé cette méthode sur Habré, mais malheureusement je n’ai pas trouvé de lien vers ce sujet. Cette méthode comprend les éléments suivants : un élément inline-block de largeur nulle et de 100 % de la hauteur du parent est ajouté, ce qui "étend" la hauteur de la ligne à 100 % de la hauteur du parent, c'est-à-dire à la hauteur de la zone de travail de la page. zone. Rendons cela plus élégant - au lieu de balisages inutiles, nous utiliserons des pseudo-éléments :
Popup__overlay :après (
affichage : bloc en ligne ;
largeur : 0 ;
hauteur : 100 % ;
alignement vertical : milieu ;
contenu : ""
}
Il ne reste plus qu'à ajouter une gradation translucide de la superposition - rgba s'en chargera. Tous! Désormais, la position du popup est contrôlée uniquement par les outils du navigateur au niveau CSS.
3. Exemple de fenêtre modale jQuery appelée depuis un lien (depuis la démo)
Très probablement, vous avez déjà vu plus d'une fois une fenêtre modale contextuelle sur Internet - confirmation d'inscription, avertissement, informations de référence, téléchargement de fichiers et bien plus encore. Dans ce didacticiel, je proposerai plusieurs exemples sur la façon de créer les fenêtres modales les plus simples.
Création d'une simple fenêtre modale pop-up Commençons par regarder le code d'une simple fenêtre modale qui apparaîtra immédiatementCode jQuery
$(document).ready(fonction()
{
alert("Texte dans la fenêtre pop-up");
});
Collez le code n'importe où dans le corps de votre page. Immédiatement après le chargement de la page, sans aucune commande, vous verrez une fenêtre qui ressemble à ceci :
Mais le code suivant sera exécuté une fois la page entière chargée dans le navigateur. Dans notre exemple, après avoir chargé la page avec les images, une simple fenêtre pop-up apparaîtra :
$(window).load(function()
{
alert("Le chargement de la page est terminé !)");
});
Vous pouvez souvent voir que les formulaires de connexion et d’inscription se trouvent dans ces fenêtres. Nous allons passer aux choses sérieuses
Tout d’abord, écrivons la partie HTML. Nous plaçons ce code dans le corps de votre document.
Appel d'une fenêtre modale
Texte de la fenêtre modale
Fermer
Texte dans une fenêtre modale.
Code CSS. Soit dans un fichier CSS séparé, soit dans l'en-tête.
corps(
famille de polices:verdana;
taille de police : 15 px ;
}
.link (couleur : #fff ; décoration de texte : aucun)
.link:hover (couleur:#fff; décoration de texte:soulignement)
#masque (
position : absolue ;
gauche : 0 ;
haut : 0 ;
indice z : 9000 ;
couleur d'arrière-plan : #000 ;
affichage : aucun ;
}
#boxes.fenêtre (
position : absolue ;
gauche : 0 ;
haut :0px ;
-haut : 40 px ;
largeur : 440 px ;
hauteur : 200 px ;
affichage : aucun ;
indice z : 9999 ;
remplissage : 20 px ;
débordement caché;
}
#boîtes #dialogue (
largeur : 375 px ;
hauteur : 203 px ;
remplissage : 10 px ;
couleur d'arrière-plan : #ffffff ;
}
.haut(
position : absolue ;
gauche : 0 ;
haut : 0 ;
largeur : 370 px ;
hauteur : 30 px ;
arrière-plan : #0085cc ;
remplissage : 8px 20px 6px 10px ;
}
.fermer(
Flotter à droite;
}
.contenu(
rembourrage supérieur : 35 px ;
}
Dans le code jQuery, nous nous concentrerons sur la position de la fenêtre modale et du masque, dans notre cas l'assombrissement progressif du fond.
Attention! N'oubliez pas d'inclure la bibliothèque en tête du document !
Connexion de la bibliothèque depuis le site Web de Google. Eh bien, le code jQuery lui-même.
Code jQuery
$(document).ready(function() (
$("a").click(fonction(e) (
e.preventDefault();
var id = $(this).attr("href");
var masqueHauteur = $(document).hauteur();
var maskWidth = $(window).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#masque").fadeIn(1000);
$("#mask").fadeTo("lent",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("gauche", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(fonction (e) (
e.preventDefault();
$("#masque, .window").hide();
});
$("#masque").click(function () (
$(this).hide();
$(".window").hide();
});
});
Les fenêtres modales sont un outil fréquemment utilisé dans l'arsenal d'un webmaster. Il est très bien adapté pour résoudre un grand nombre de tâches, telles que l'affichage de formulaires d'inscription, de blocs publicitaires, de messages, etc.
Mais, malgré leur place importante dans le support informationnel du projet, les fenêtres modales sont généralement implémentées en JavaScript, ce qui peut créer des problèmes lors de l'extension des fonctionnalités ou de la garantie d'une compatibilité ascendante.
HTML5 et CSS3 facilitent incroyablement la création de fenêtres modales.
Balisage HTMLLa première étape vers la création d’une fenêtre modale est un balisage simple et efficace :
Ouvrir la fenêtre modale
À l'intérieur d'un élément div Le contenu de la fenêtre modale est placé. Vous devez également fournir un lien pour fermer la fenêtre. Par exemple, plaçons un titre simple et plusieurs paragraphes. Le balisage complet de notre exemple ressemblerait à ceci :
Ouvrir la fenêtre modale X Fenêtre modale
Un exemple de fenêtre modale simple pouvant être créée en utilisant CSS3.
Il peut être utilisé dans un large éventail, de l'affichage de messages à l'enregistrement de formulaires.
modesCréer une classe modalDialog et commencez à façonner l'apparence :
ModalDialog ( position : fixe ; famille de polices : Arial, Helvetica, sans-serif ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; arrière-plan : rgba(0,0,0,0.8) ; z-index : 99999 ; -webkit-transition : opacité 400 ms facile à entrer ; -moz-transition : opacité 400 ms facile à entrer ; transition : opacité 400 ms facile à entrer ; affichage : aucun ; événements de pointeur : aucun ; )
Notre fenêtre aura une position fixe, c'est-à-dire qu'elle descendra si vous faites défiler la page avec la fenêtre ouverte. De plus, notre fond noir s'étendra pour remplir tout l'écran.
L'arrière-plan aura une légère transparence et sera également placé au-dessus de tous les autres éléments grâce à l'utilisation de la propriété indice z.
Enfin, nous définissons les transitions pour afficher notre fenêtre modale et la masquons dans un état inactif.
Peut-être que vous ne connaissez pas la propriété événements de pointeur, mais il vous permet de contrôler la façon dont les éléments réagiront aux clics de souris. Nous définissons la valeur à sa valeur pour la classe modalDialog, puisque le lien ne doit pas répondre aux clics de souris lorsque la pseudo-classe est active ":cible".
Maintenant, nous ajoutons une pseudo-classe :cible et les styles pour la fenêtre modale.
ModalDialog:target ( display: block; pointer-events: auto; ) .modalDialog > div ( width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: # fff ; arrière-plan : -moz-linear-gradient(#fff, #999); arrière-plan : -webkit-linear-gradient(#fff, #999); arrière-plan : -o-linear-gradient(#fff, #999); )
Pseudo-classe cible change le mode d'affichage de l'élément, donc notre fenêtre modale sera affichée lorsque vous cliquerez sur le lien. Nous modifions également la valeur de la propriété événements de pointeur.
Nous définissons la largeur et la position de la fenêtre modale sur la page. Nous définissons également un dégradé pour le fond et les coins arrondis.
Fermer la fenêtreNous devons maintenant implémenter la fonctionnalité de fermeture de fenêtre. Formation de l'apparence du bouton :
Fermer (arrière-plan : #606061 ; couleur : #FFFFFF ; hauteur de ligne : 25 px ; position : absolue ; droite : -12 px ; alignement du texte : centre ; haut : -10 px ; largeur : 24 px ; décoration du texte : aucune ; police- poids : gras ; -webkit-border-radius : 12px ; -moz-border-radius : 12px ; border-radius : 12px ; -moz-box-shadow : 1px 1px 3px #000 ; -webkit-box-shadow : 1px 1px 3px #000 ; box-shadow : 1px 1px 3px #000 ; ) .close:hover ( arrière-plan : #00d9ff; )
Pour notre bouton, nous définissons l'arrière-plan et la position du texte. Ensuite, nous positionnons le bouton, l'arrondissons à l'aide de la propriété d'arrondi du cadre et formons une ombre légère. Lorsque vous passez votre souris sur le bouton, nous changerons la couleur d'arrière-plan.
Très souvent, vous pouvez trouver des fenêtres modales sur les sites Web, et elles sont toutes utilisées pour des tâches différentes. En fait, il s'agit d'un outil assez puissant qui vous permet de rendre l'interface du site plus interactive et plus pratique. Par exemple, les fenêtres modales peuvent être utilisées pour divers formulaires, comme un formulaire d'autorisation, un formulaire de commentaires, passer une commande pour un produit, et on ne sait jamais.
Dans cet article, nous examinerons un exemple de création d'une fenêtre modale simple à l'aide de JQuery et CSS. La particularité de cet exemple est qu'il n'est pas obligatoire, à l'exception de la bibliothèque JQuery elle-même.
Placez le code de la fenêtre modale sur la page :
fermer Ouvrir la fenêtre modale
Comme vous pouvez le voir sur le balisage, le bloc de la fenêtre modale elle-même est un div avec l'attribut id= modal_form qui contient un élément span avec id= modal_close. Cet élément servira de bouton pour fermer la fenêtre modale, de plus, en dessous du bloc il y a un bloc div avec l'attribut id= recouvrir, qui sert également à assombrir l’arrière-plan. La fenêtre modale s'ouvrira par lien, avec la classe modal.
CSS pour fenêtre modale
#modal_form (largeur : 300 px ; hauteur : 300 px ; rayon de bordure : 5 px ; bordure : 3 px #000 solide ; arrière-plan : #fff ; position : fixe ; haut : 45 % ; gauche : 50 % ; marge supérieure : -150 px ; marge gauche : -150 px ; affichage : aucun ; opacité : 0 ; z-index : 5 ; remplissage : 20 px 10 px ; ) #modal_form #modal_close ( largeur : 21 px ; hauteur : 21 px ; position : absolue ; haut : 10 px ; droite : 10px; curseur: pointeur; affichage: bloc; ) #overlay ( z-index:3; position:fixed; background-color:#000; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80) ; largeur : 100 % ; hauteur : 100 % ; haut : 0 ; gauche : 0 ; curseur : pointeur ; affichage : aucun ; )
Pour modal_form nous définissons une largeur et une hauteur fixes, puis centrons la position au centre de l'écran. Pour l'arrière-plan de la fenêtre modale ( recouvrir) nous définissons la taille pour qu'elle s'adapte à la largeur de l'écran, la remplissons de transparence et la masquons également par défaut. Moment privilégié avec indice z, le modal doit avoir le plus grand de tous les éléments de la page, et la couverture doit avoir le plus grand de tous les éléments, à l'exception du modal lui-même.
Passons maintenant à la chose la plus élémentaire, c'est le code javascript. Deux événements principaux seront utilisés pour la fenêtre modale : son ouverture - clic sur un élément avec la classe modal, dans notre cas c'est un lien, et fermer la fenêtre modale est un clic sur la couverture ( recouvrir), ou cliquez sur le bouton fermer, dans notre cas il s'agit d'un élément span avec id= modal_close.
$(document).ready(function() ( $(".modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // animer l'affichage de la fonction de couverture ()( // affiche ensuite la fenêtre du mod $("#modal_form") .css("display", "block") .animate((opacity: 1, top: "50%"), 200); )); )); // fermeture de la fenêtre modale $("#modal_close, #overlay").click(function())( $("#modal_form") .animate((opacity: 0, top: "45% "), 200, // réduire la fonction de transparence())( // après l'animation $(this).css("display", "none"); // masquer la fenêtre $("#overlay").fadeOut (400); // masquer l'arrière-plan ) ); )); ));
En utilisant animer, nous changeons la position verticale haut, ainsi que la transparence opacité, et avec cela nous obtenons un effet intéressant. Un effet similaire est utilisé à la fois lors de l'ouverture d'une fenêtre et lors de sa fermeture. La différence est que l'ordre dans lequel les propriétés sont appliquées aux blocs change, visualisant ainsi l'ouverture et la fermeture de la fenêtre.