Share
Aujourd'hui, nous allons prendre la fenêtre Popup Modal d'Orman et la recréer avec HTML et CSS. Nous utiliserons ensuite le plug-in jQuery Reveal pour lui donner toutes ses fonctionnalités. Nous allons même aller un peu plus loin et ajouter quelques requêtes multimédia CSS3 pour l'adapter à l'utilisation mobile. Creusons!
[Ceci] est une simple petite fenêtre modale, parfaite peut-être pour les petits messages de confirmation, comme dans l’aperçu. Et non, il n'y a aucune excuse pour utiliser Comic Sans. Orman Clark
Nous allons commencer par créer un document vierge à l'aide du balisage HTML5. Nous avons établi un lien vers notre feuille de style et le HTML5 Shiv, ce qui permettra aux éléments HTML5 de s'afficher correctement dans IE. Surtout, nous avons également créé un lien vers la dernière bibliothèque jQuery (hébergée par Google) au bas de notre page pour un chargement de page optimisé..
Enfin, vous remarquerez peut-être que nous avons également inclus une autre ligne dans notre tête; la métabalise de la fenêtre d'affichage. Cela permettra aux appareils d'interpréter correctement notre page, quelle que soit leur taille d'écran. Si vous souhaitez en savoir plus sur ce sujet, assurez-vous de consulter ce conseil rapide.!
Fenêtre Modale Pop Up
Avant de commencer à ajouter des balises et des styles, nous allons télécharger le plugin Reveal. Rendez-vous sur http://www.zurb.com/playground/reveal-modal-plugin et cliquez sur "Télécharger le kit Reveal" à droite de la page..
Décompressez le fichier que vous avez téléchargé. Vous devrez copier le fichier jquery.reveal.js à la racine de votre site ou dans le dossier de votre choix. J'ai créé un dossier appelé "js", où je conserve généralement mes ressources javascript. Ensuite, nous devrons faire référence à notre script, alors copiez ce qui suit après votre script jQuery, en vous assurant que le chemin est correct.
Pour ce tutoriel, nous allons créer un bouton sur lequel on peut cliquer pour activer le modal. Je suis allé de l'avant et a pris un style de bouton de Freebie Free Web Buttons Orman.
Cliquez moi
Avant de lancer quelques styles, nous allons rapidement ajouter une réinitialisation pour supprimer les marges indésirables, etc. du navigateur. Nous avons également ajouté quelques styles pour le corps: une famille de polices, un arrière-plan et une taille de police de 100%..
html, corps, div, span, applet, objet, iframe, h1, h2, h4, h4, h5, h6, p, blockquote, pre, un, abbr, acronyme, adresse, gros, citer, code, del, dfn, em, img, ins, kbd, q, s, samp, petit, grève, fort, sous, sup, tt, var, b, u, i, centre, dl, dt, dd, ol, ul, li, champs, forme, étiquette, légende, tableau, légende, tbody, tbody, tfoot, thead, tr, th, td, article, de côté, toile, détails, intégrer, figure, figcaption, pied de page, en-tête, hgroup, menu, navigation, sortie section, résumé, heure, marque, audio, vidéo margin: 0; rembourrage: 0; bordure: 0; font: hériter; alignement vertical: ligne de base; html font-size: 62.5%; / * Réinitialisation du rôle d'affichage HTML5 pour les anciens navigateurs * / article, à part, détails, figcaption, figure, pied de page, en-tête, hgroup, menu, navigation, section display: block; body line-height: 1; ol, ul list-style: none; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0; a text-decoration: none; body font-family: 'Helvetica Neue', Helvetica, Arial, sans police; taille de police: 100%; arrière-plan: #fff;
Pour le bouton, nous allons créer le style en utilisant des dégradés, des zones d’ombre et un rayon de bordure. La principale chose à prendre en compte ici est le positionnement.
Premièrement, nous positionnons absolument le bouton dans le corps / navigateur. En appliquant 50% à gauche et en haut, vous placerez son coin supérieur gauche dans le centre de l’écran. Ensuite, nous devons réduire la marge en haut et à gauche. Pour savoir ce dont nous avons besoin pour les compenser, examinons notre hauteur et notre largeur. Nous avons besoin de la moitié de notre largeur de 78 pour obtenir 39, et moins la marge laissée pour cela. Ensuite, nous prenons 28/2 = 14 et moins la marge supérieure par là. Si vous n'êtes pas sûr de ce qui se passe ici, il est judicieux de centrer un élément verticalement et horizontalement dans CSS. Si vous souhaitez en savoir plus, consultez ce bel article sur CSS Tricks.
Ceci fait, nous avons également ajouté un effet de survol optionnel..
#button width: 78px; hauteur: 28px; image d'arrière-plan: -webkit-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: -o-linéaire-gradient (en haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (254, 218, 113), rgb (254, 186, 72)); image d'arrière-plan: gradient linéaire (haut, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); bordure: 1px solide # ca9336; -webkit-box-shadow: encart 0px 1px 0px # fee395, 0px 1px 1px rgba (0,0,0, 0,15); -moz-box-shadow: encart 0px 1px 0px # fee395, 0px 1px 1px rgba (0,0,0, 0,15); box-shadow: incrément 0px 1px 0px # fee395, 0px 1px 1px rgba (0,0,0, 0,15); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; taille de police: 13px; poids de police: gras; text-align: center; hauteur de ligne: 28px; couleur: # 996633; ombre du texte: 0px 1px 0px rgba (255,255,255, .4); position: absolue; en haut: 50%; à gauche: 50%; marge supérieure: -14px; marge gauche: -39px; #button: hover background-image: -webkit-linear-gradient (haut, rgb (254, 194, 82), rgb (254, 205, 97)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (254, 194, 82), rgb (254, 205, 97)); image d'arrière-plan: -o-linéaire-gradient (en haut, rgb (254, 194, 82), rgb (254, 205, 97)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (254, 194, 82), rgb (254, 205, 97)); image d'arrière-plan: gradient linéaire (en haut, rgb (254, 194, 82), rgb (254, 205, 97)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# fec252', EndColorStr = "# fecd61"); -webkit-box-shadow: encart 0px 1px 0px # fed17e, 0px 1px 1px rgba (0,0,0, .1); -moz-box-shadow: encart 0px 1px 0px # fed17e, 0px 1px 1px rgba (0,0,0, .1); box-shadow: incrément 0px 1px 0px # fed17e, 0px 1px 1px rgba (0,0,0, .1);
Nous ajouterons ensuite un balisage qui créera notre fenêtre modale. Nous allons commencer par créer un div avec un identifiant de "modal". Ce sera la base de notre fenêtre modale.
Cliquez moi
OK, passons à un style pour cette fenêtre. Encore une fois, nous allons utiliser la méthode de centrage. Vous pouvez également voir que nous utilisons !important. Il est souvent déconseillé d'insérer des styles CSS dans cette méthode (cela peut ruiner la spécificité d'une feuille de style et rendre l'édition future vraiment gênante), mais dans ce cas, nous n'avons pas d'autre choix, car les styles définis par le plugin doivent être écrasés..
Nous avons également ajouté visibilité: cachée; pour masquer le menu, il sera affiché en cliquant sur notre bouton.
#modal width: 360px; hauteur: 189px; rembourrage: 8px; arrière-plan: rgba (0,0,0, 0,3); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; position: absolue! important; en haut: 50%! important; à gauche: 50%! important; margin-top: -94px! important; margin-left: -180px! important; z-index: 101;
Nous avons appliqué un rayon de bordure de 8 px, ce qui peut sembler une valeur inhabituelle, mais cela garantira que les coins extérieurs s’arrondent de manière appropriée autour de ceux de l’intérieur..
Ensuite, nous ajouterons le titre du modèle. Ce sera une autre division avec un identifiant d'en-tête et juste du texte à l'intérieur. Bien sûr, n'hésitez pas à utiliser un ou ce que vous préférez.
Cliquez moiÊtes-vous sûr de vouloir faire ça?Ensuite, nous ajouterons du code CSS au style, juste quelques éléments de base ici, des ombres de boîte de dégradés, etc..
#heading width: 360px; hauteur: 44px; image d'arrière-plan: -webkit-linear-gradient (haut, rgb (249, 249, 249), rgb (233, 233, 233)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (249, 249, 249), rgb (233, 233, 233)); image d'arrière-plan: -o-linear-gradient (haut, rgb (249, 249, 249), rgb (233, 233, 233)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (249, 249, 249), rgb (233, 233, 233)); image d'arrière-plan: dégradé linéaire (haut, rgb (249, 249, 249), rgb (233, 233, 233)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f9f9f9', EndColorStr = "# e9e9e9"); bordure-bas: 1px solide #bababa; -webkit-box-shadow: encart 0px -1px 0px #fff, 0px 1px 3px rgba (0,0,0, .08); -moz-box-shadow: encart 0px -1px 0px #fff, 0px 1px 3px rgba (0,0,0, 0,08); box-shadow: incrément 0px -1px 0px #fff, 0px 1px 3px rgba (0,0,0, 0,08); -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; taille de police: 14px; poids de police: gras; text-align: center; hauteur de ligne: 44px; couleur: # 444444; text-shadow: 0px 1px 0px #fff;
Étape 6: Contenu principal modal
Maintenant, nous allons créer la section qui contient le paragraphe et les boutons.
Cliquez moiÊtes-vous sûr de vouloir faire ça?En cliquant sur oui, Comic Sans deviendra votre nouveau système
police par défaut. Sérieusement, avez-vous pensé à cela?Oui, fais-le maintenant!
Non, je suis fou!
Quelques règles CSS de base encore, pour le paragraphe, nous avons défini la largeur de 100% et aligné le texte au centre, mais notez que dans le code HTML, nous avons utilisé un saut de ligne..
#content width: 360px; hauteur: 144px; arrière-plan: #fcfcfc; -webkit-box-shadow: 0px 1px 3px rgba (0,0,0, 0,25); -moz-box-shadow: 0px 1px 3px rgba (0,0,0, 0,25); box-shadow: 0px 1px 3px rgba (0,0,0, 0,25); -webkit-border-radius: 0px 0px 4px 4px; -moz-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px; #contenu p font-size: 13px; poids de police: normal; text-align: center; hauteur de ligne: 22px; couleur: # 555555; largeur: 100%; float: gauche; marge: 19px 0;
Étape 7: ces boutons!
Nous avons ajouté des balises pour les boutons lors de la dernière étape, mais nous allons maintenant leur ajouter des styles. Vous avez peut-être remarqué que nous avons également utilisé deux images ici, celles-ci sont utilisées pour la croix et la coche. Nous avons structuré cela en ajoutant deux classes,
boutonqui définit tous les styles principaux d’un bouton puis d’unrougeetvertclasse, évidemment pour créer les couleurs.Nous avons également ciblé les images contenues dans les boutons, les avons placées à gauche et leur avons donné une largeur et une hauteur..
.bouton largeur: 138px; hauteur: 33px; taille de police: 13px; poids de police: gras; hauteur de ligne: 33px; couleur: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: encart 0px 1px 0px rgba (255,255,255, .5), 0px 1px 2px rgba (0,0,0, 0,3); -moz-box-shadow: encart 0px 1px 0px rgba (255,255,255, .5), 0px 1px 2px rgba (0,0,0, 0,3); box-shadow: incrément 0px 1px 0px rgba (255,255,255, 0,5), 0px 1px 2px rgba (0,0,0, 0,3); float: gauche; .button img float: left; largeur: 33px; hauteur: 33px; .button.green background: -webkit-linear-gradient (haut, rgba (170,212,79,1)) 0%, rgba (116,185,49,1) 90%, rgba (106,173,45,1) 95%, rgba (96,157,41,1) 100%); fond: -moz-linear-gradient (haut, rgba (170,212,79,1) 0%, rgba (116,185,49,1) 90%, rgba (106,173,45,1) 95%, rgba (96,157,41, 1100%); fond: -o-linéaire-gradient (haut, rgba (170,212,79,1) 0%, rgba (116,185,49,1) 90%, rgba (106,173,45,1) 95%, rgba (96,157,41, 1100%); arrière-plan: -ms-linear-gradient (top, rgba (170,212,79,1) 0%, rgba (116,185,49,1) 90%, rgba (106,173,45,1) 95%, rgba (96,157,41, 1100%); fond: gradient linéaire (haut, rgba (170,212,79,1) 0%, rgba (116,185,49,1) 90%, rgba (106,173,45,1) 95%, rgba (96,157,41,1) 100 %); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# aad44f", endColorstr = "# 609d29", GradientType = 0); bordure: 1px solide # 5b8821; marge: 0 5 px 0 35 px; .button.red background: -webkit-linear-gradient (haut, rgba (248,114,136,1)) 0%, rgba (243,71,85,1) 90%, rgba (225,65,77,1) 95 %, rgba (206,59,70,1) 100%); fond: -moz-linear-gradient (top, rgba (248,114,136,1) 0%, rgba (243,71,85,1) 90%, rgba (225,65,77,1) 95%, rgba (206, 59,70,1) 100%); fond: -o-linéaire-gradient (haut, rgba (248,114,136,1) 0%, rgba (243,71,85,1) 90%, rgba (225,65,77,1) 95%, rgba (206, 59,70,1) 100%); arrière-plan: -ms-gradient-linéaire (top, rgba (248,114,136,1) 0%, rgba (243,71,85,1) 90%, rgba (225,65,77,1) 95%, rgba (206, 59,70,1) 100%); fond: gradient linéaire (haut, rgba (248,114,136,1) 0%, rgba (243,71,85,1) 90%, rgba (225,65,77,1) 95%, rgba (206,59,70 ,1100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f87288", endColorstr = "# ce3b46", GradientType = 0); bordure: solide 1px # b0333e; marge: 0 35 px 0 5 px;
Étape 8: Connecter avec Reveal
Maintenant que nous avons enfin terminé le style de notre modal, nous allons le connecter au plugin Reveal. Nous devons d’abord revenir à notre CSS, trouver
#modalet ajoutervisibilité: cachée;à cela.Ensuite, nous devrons revenir à notre document HTML et ajouter ce qui suit au bas de notre document, sous lequel nous référons le script Reveal. Ici, nous associons le bouton comme élément de clic et notre div modal comme élément qui s'ouvre..
Étape 9: Où est ce recouvrement??
Vous pensez peut-être que nous avons terminé, mais attendez soldat! Nous sommes censés avoir une superposition noire pour couvrir tout ce qui se trouve sous le modal - la page entière. Pour résoudre ce problème, nous devrons appliquer des CSS à un élément créé par le plugin révélé, couvrant la page..
.révéler-modal-bg position: fixed; hauteur: 100%; largeur: 100%; arrière-plan: # 000; arrière-plan: rgba (0,0,0, 0,4); z-index: 100; affichage: aucun; en haut: 0; gauche: 0;
Étape 10: le rendre mobile
D'accord, nous avons terminé notre modal maintenant, mais nous ajouterons quelques styles pour répondre aux besoins des plus petits appareils. La requête multimédia suivante (ajoutée après toutes les autres règles css) applique les styles lorsque les écrans sont plus larges que 767px. Pour permettre au modal d'être visualisé correctement sans se superposer à l'écran, nous avons simplement changé certaines largeurs, hauteurs et tailles de police..
@media only screen et (max-width: 767px) #modal width: 284px; hauteur: 156px; rembourrage: 8px; margin-left: -150px! important; marge supérieure: -78px; #heading width: 284px; hauteur: 28px; hauteur de ligne: 28px; taille de police: 0.688em; #content width: 284px; hauteur: 128px; #content p width: 284px; taille de police: 0.688em; .button img width: 23px; hauteur: 23px; .button width: 108px; hauteur: 23px; hauteur de ligne: 23px; taille de police: 0.688em; .button.green margin: 0 4px 0 28px! important; .button.red margin: 0 28px 0 4px! important;
Navigateurs plus anciens
Alors, comment tout cela va-t-il dans les anciens navigateurs??
Outre les techniques CSS3 modernes telles que les dégradés, le rayon de la bordure, etc., le modal fonctionnera comme prévu dans les anciennes versions d'Internet Explorer. Un exemple parfait de dégradation gracieuse.
Conclusion
Ok nous l'avons fait! Nous avons pris un autre des designs d'Orman et l'avons codé, cette fois en utilisant un plugin gratuit jQuery appelé Reveal.
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
Accentsconagua
Oui, fais-le maintenant! 
Non, je suis fou! 
