3. Un exemple d'un modal jQuery appelé par lien (avec Demo)
Très probablement, vous avez déjà vu une fenêtre modale contextuelle sur Internet - confirmation d'enregistrement, avertissement, informations d'aide, téléchargement de fichiers et bien plus encore. Dans ce didacticiel, je vais proposer quelques exemples de création des fenêtres modales les plus simples.
Créer une simple popup modale
Commençons par considérer le code de la fenêtre modale la plus simple, qui apparaîtra immédiatementcode jquery
Collez le code n'importe où dans corps ta page. Immédiatement après le chargement de la page, sans aucune commande, vous verrez une fenêtre comme celle-ci :
Mais le code suivant sera exécuté après le chargement de la page entière dans le navigateur. Dans notre exemple, après avoir chargé la page avec des images, une simple fenêtre pop-up apparaîtra :
Appel d'un modal jQuery à partir d'un lien avec CSS
L'étape suivante consiste à créer fenêtre modale en cliquant sur le lien. L'arrière-plan s'assombrit lentement.
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
Pour commencer, écrivons partie html. Nous plaçons ce code dans le corps de votre document.
Appel d'une fenêtre modale
Code CSS. Soit dans un fichier css séparé, soit dans
Dans le code jQuery, nous allons nous concentrer sur la position du modal et du masque, dans notre cas, l'assombrissement progressif du fond.
Attention! N'oubliez pas d'inclure la bibliothèque dans l'en-tête du document !
Connexion de la bibliothèque depuis le site Google. Eh bien, le code jQuery lui-même.
Code jQuery
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 différentes formes et tailles sont devenues la norme. Il existe également un grand nombre de plugins en plus de jQuery pour le simple et la création pratique de telles fenêtres contextuelles - la Shadowbox par exemple.
L'apparence, la taille et la conception de ces pop-ups sont complètement diverses - avec une superposition, des ombres, des animations - vous ne pouvez pas tout compter. La seule chose qui les unit, peut-être, est 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 au moyen de JS. Je n'entrerai pas dans le détail de ces calculs, je ne les décrirai que brièvement :
Le code HTML contextuel a généralement la structure suivante :
Et CSS( ici et ci-dessous, j'omettrai délibérément l'écriture de certaines propriétés qui ne sont nécessaires que pour certains navigateurs et leurs versions, ne laissant que les plus basiques):
Popup_overlay(
poste : fixe ;
gauche : 0
haut : 0 ;
fond : #000
opacité : .5
filtre : alpha(opacité=50 );
indice z : 999
}
.apparaitre(
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 les dimensions de l'espace de travail et les dimensions de la fenêtre contextuelle elle-même (si elles ne sont pas définies), puis des calculs simples sont effectués sur la position de son coin supérieur gauche (css propriétés à gauche et en haut pour .popup). De nombreux plugins réagissent également au redimensionnement de la page, recalculant le tout à chaque fois, afin que la popup soit positionnée exactement au centre de l'espace de travail.
Je suis un perfectionniste de nature (je sais que parfois c'est mauvais), et je m'embête souvent même avec de petits détails, en essayant d'améliorer et d'ajouter le maximum d'extensibilité possible à ces détails, et je ne pouvais pas m'empêcher d'être accro à ce moment particulier du travail de tous ces plugins. L'idée est née que tout le travail de positionnement des popups peut être déplacé des épaules de JS vers les épaules du navigateur lui-même, c'est-à-dire que ce travail peut être effectué à l'aide de CSS.
C'est ce que nous allons faire.
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<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.
Donc, nous avons une page avec un bouton, une fois cliqué, une fenêtre modale avec des informations devrait apparaître, et le reste du contenu devrait être masqué par une superposition.
Tout d'abord, le code HTML. Sa structure sera légèrement différente du code indiqué ci-dessus, pourquoi - plus à ce sujet plus loin dans l'article ; les classes d'éléments resteront les mêmes :
<
div
class
="popup__overlay">
<
div
class
="popup">
Et quelques CSS :
Popup_overlay(
poste : fixe ;
gauche : 0
haut : 0 ;
largeur : 100%
hauteur : 100%
indice z : 999
}
.apparaitre(
}
dimensions fixes
L'option la plus simple. Rien de nouveau à inventer.Apparaitre (
gauche : 50%
haut : 50% ;
largeur : 400px
hauteur : 200px ;
marge-gauche : -200px ;
marge-haut : -100px
}
Les marges négatives de la moitié de la largeur et de la hauteur sont banales et ennuyeuses, il n'y a rien d'original là-dedans.
La taille des popups dépend du contenu
Premièrement - l'alignement horizontal - cela semble être plus facile. Si le popup a une largeur fixe, alors ce qui suit suffira :Apparaitre (
marge : auto
}
Cela n'affectera en rien l'alignement vertical et, en passant, si seul l'alignement horizontal vous suffit, vous pouvez vous arrêter là en spécifiant un autre retrait supérieur de la fenêtre contextuelle. Mais cela ne nous suffit pas ! Vas-y.
Alignement vertical. C'est là que ça devient intéressant. Bien sûr, une émulation de table ou de table avec display: table & display: table-cell aurait fait face à une telle tâche sans aucun problème, mais faire fonctionner cela dans l'ancien IE est plus coûteux. Le tableau disparaît également - pour des raisons évidentes.
Donc, la marge est déjà partie - nous ne connaissons pas les tailles. Rappelons quelles sont les propriétés aux effets similaires. Oui, aligner le texte. Mais uniquement pour les éléments en ligne. D'ACCORD. Il semble que Dieu lui-même ait ordonné d'utiliser display: inline-block - un élément de bloc auquel vous pouvez appliquer des propriétés pour les éléments en ligne. Avec le support de cette propriété, tous les navigateurs ont également tout, pourrait-on dire, en ordre. Le code devient quelque chose comme ça :
Popup_overlay(
poste : fixe ;
gauche : 0
haut : 0 ;
largeur : 100%
hauteur : 100%
z-index : 999 ;
text-align : center
}
.apparaitre(
affichage : inline -block ;
vertical-align : milieu
}
Ce qui reste est l'alignement vertical - l'alignement vertical nous convient. Dans toute autre situation, il serait également approprié d'utiliser line-height, mais comme nous n'avons pas de hauteur de page fixe (line-height dans ce contexte), nous ne pouvons pas l'utiliser ici. Une astuce qui vient à la rescousse est l'alignement vertical d'éléments de tailles inconnues. Je me souviens exactement que j'ai trouvé cette méthode sur Habré, mais, malheureusement, je n'ai pas trouvé de lien vers ce sujet. Cette méthode consiste en ce qui suit : un élément de bloc en ligne de largeur nulle et de 100 % de 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 l'espace de travail de la page . Rendons-le plus élégant - au lieu d'un balisage supplémentaire, nous utiliserons des pseudo-éléments :
Popup_overlay : après (
affichage : inline -block ;
largeur : 0
hauteur : 100%
alignement vertical : milieu ;
contenu : ""
}
Il reste à ajouter une gradation translucide de la superposition - rgba s'en chargera. Tout! Désormais, la position de la fenêtre contextuelle n'est régulée que par les outils du navigateur au niveau CSS.
Dans cette leçon, je ne dévoilerai pas le secret aux maquettistes chevronnés et aux gourous du CSS, mais cet article sera utile aux débutants. c'est ici que vous pouvez apprendre à créer des popups au-dessus de l'ensemble du site.Le plus souvent, de telles fenêtres apparaissent après avoir effectué certaines actions sur le site, par exemple, l'utilisateur clique sur le lien "Commander un rappel" et un formulaire de commande apparaît devant lui.
Il est très pratique d'utiliser les fenêtres PopUp en conjonction avec ajax, mais c'est un sujet pour une autre leçon.
De plus en plus de ressources Web commencent à apparaître sur le Web qui utilisent des pop-ups PopUp. Un exemple est les réseaux sociaux bien connus. Toutes les données inutiles des captures d'écran ont été supprimées.
En contact avec
Je pense qu'il y a suffisamment de raisons pour commencer à explorer la question : comment créer une fenêtre contextuelle PopUp sur votre site.
Énoncé du problème (TOR)
Il est nécessaire de créer une fenêtre pop-up avec obscurcissement de l'écran sur l'ensemble du site.Solution
Méthode 1
html
CSS
*( font-family : Areal ; ) .b-container( width : 200px ; height : 150px ; background-color : #ccc ; margin : 0px auto ; rembourrage : 10px ; font-size : 30px ; couleur : #fff ; ) .b-popup (largeur : 100 % ; hauteur : 2 000 pixels ; couleur d'arrière-plan : rgba (0,0,0,0.5) ; débordement : masqué ; position : fixe ; haut : 0 pixel ; ) .b-popup .b-popup -contenu (marge : 40px auto 0px auto ; largeur : 100px ; hauteur : 40px ; rembourrage :10px ; background-color : #c5c5c5 ; border-radius :5px ; box-shadow : 0px 0px 10px #000 ; )Résultat:
Il est souvent suggéré d'utiliser :
Position : absolue ;
Oui, le résultat est similaire, mais du fait que nous avons défini la hauteur du bloc "fondu", des barres de défilement apparaissent. C'est pourquoi cette méthode ne convient pas.
Méthode 2
Cette méthode n'est pas fondamentalement différente de la méthode 1, mais je la trouve plus pratique.html (pas de changement)
CSS
*( font-family : Areal ; ) .b-container( width : 200px ; height : 150px ; background-color : #ccc ; margin : 0px auto ; rembourrage : 10px ; font-size : 30px ; couleur : #fff ; ) .b-popup( width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; ) .b-popup . b-popup-content( margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; )Le résultat est similaire
Grâce à la propriété : min-hauteur : 100 % ; notre bloc "fading" est réglé sur 100 % de largeur et hauteur minimaleà 100% d'écran.Le seul inconvénient de cette méthode est qu'Internet Explorer ne supporte cette propriété qu'à partir de la version 8.0.
Ajouter de la magie à jquery
Ajoutons maintenant des liens pour masquer/afficher notre popup.Pour ce faire, vous devez inclure la bibliothèque jQuery et un petit script :
Vous devez également mettre à jour le Html :
Résultat
Le PopUp se cachera maintenant lors du chargement de la page.Le résultat peut être consulté ici.
Une fenêtre modale simple en termes de fonctions, qui est entièrement réalisée en CSS pur, où vous pouvez la mettre sous différentes fonctions à appeler sur le site. C'est probablement l'une des nombreuses que j'ai rencontrées parmi une sélection de fenêtres modales, en termes de facilité de configuration, mais aussi d'installation. Mais l'essentiel est sa fonctionnalité, qui ne sera pas inférieure aux autres. De plus, par défaut, il est fait sous une teinte claire, où un bouton est installé dans le coin supérieur droit, en forme de croix.Qui ira à la fonction de désactivation ou juste pour faire disparaître le cadre, où même sur ce petit élément il y a un effet de changement de palette de couleurs. Désormais, le webmaster peut le mettre sur le site et y placer une description ou des opérateurs, qui peuvent afficher différentes catégories, comme des statistiques ou un informateur.
Mais le fait est que si vous avez un style sombre de la ressource, alors dans le style, vous pouvez rapidement changer le gamma, ou plutôt l'adapter à la conception d'origine. Voici l'une des méthodes standard pour mettre du CSS pur sur un modal qui se déclenchera lorsque vous cliquerez sur un bouton sous un lien avec une ancre HTML. Le bouton lui-même va plus pour la visibilité, où dans les styles, en supprimant une classe et le nom restera, qui peut être mis à la fois dans la navigation ou dans le panneau de configuration, où se trouve la fonctionnalité principale ou la navigation du site.
C'est lors de la vérification que tout fonctionne bien:
Commençons l'installation :
Fenêtre avec bouton
ZorNet.Ru - portail du webmaster×
C'est là que le contenu du site sera situé.
CSS
Butksaton-satokavate (
affichage : bloc en ligne
décoration de texte : aucune ;
marge droite : 7 px ;
rayon de bordure: 5px
rembourrage : 7px 9px ;
arrière-plan : #199a36 ;
couleur : #fbf7f7 !important;
}
Alumen (
affichage : flexible ;
position : fixe ;
gauche : 0 ;
Top 100%;
largeur : 100 %
hauteur : 100 % ;
align-items : center ;
justifier-contenu : centrer ;
opacité : 0
-webkit-transition : top 0s .7s, opacité .7s 0s ;
transition : top 0s .7s, opacité .7s 0s ;
}
Canal:cible (
haut : 0 ;
opacité : 1
-transition webkit : aucune ;
transition : aucune ;
}
figure d'anelumen (
largeur : 100 %
largeur maximale : 530px
position : relative ;
rembourrage : 1,8 em
opacité : 0
couleur de fond : blanc
-webkit-transition : opacité .7s ;
transition : opacité .7s ;
}
Figure d'anelumen.lowingnuska (
arrière-plan : #f9f5f5 ;
rayon de bordure: 7px
rembourrage haut : 8 px ;
bordure : 3px solide #aaabad ;
}
Anelumen.lowingnuska figure h2 (
marge supérieure : 0 ;
rembourrage en bas : 3px
bordure inférieure : 1px solide #dcd7d7 ;
}
Alumen :chiffre cible (
opacité : 1
}
anelumen.lowingnuska .compatibg-ukastywise (
décoration de texte : aucune ;
position : absolue ;
droite : 8px ;
haut : 0px ;
taille de police : 41 px ;
}
Alumen .nedismiseg (
gauche : 0 ;
haut : 0 ;
largeur : 100 %
hauteur : 100 % ;
position : fixe ;
couleur de fond : rgba (10, 10, 10, 0,87) ;
contenu: "";
curseur : par défaut ;
visibilité : masquée ;
-webkit-transition : tous les .7 s ;
transition : tous les 0,7 s ;
}
Alumen:target .nedismiseg (
visibilité : visible ;
}
Vous devez également être conscient que le style CSS et le pseudo-classement sont l'une de ces fonctionnalités CSS qui ne sont pas pleinement exploitées avec de nombreuses applications potentielles intéressantes.
Il se déclenche lorsque l'URL de la page correspond à l'ID de son élément, ou vous pouvez le dire autrement, c'est lorsque l'utilisateur accède à un élément spécifique de la page.
Bonjour à tous, je vais vous parler d'une chose très pratique appelée une fenêtre modale, nous allons découvrir comment faire une fenêtre modale ? Beaucoup ne comprennent pas ce que c'est, je vais essayer de l'expliquer dans une langue que vous comprenez, en d'autres termes, c'est une fenêtre pop-up lorsque vous cliquez sur un bouton ou un texte.
À l'intérieur de cette fenêtre, il peut y avoir n'importe quelle information (vidéo, image, code, etc.) J'ai maintenant commencé à utiliser davantage la fenêtre modale, car il y a du matériel qui doit être disons qu'il n'est pas affiché sur la page, mais disons qu'il y avait une image, lorsque vous cliquez dessus, une fenêtre apparaît avec des informations.
Je l'ai récemment fait sur un site, j'ai inséré une image sur le site principal, pas même une image, mais une capture d'écran d'une vidéo YouTube, et lorsque vous cliquez dessus, une fenêtre apparaît où elle affiche la vidéo. Un exemple d'une telle fenêtre peut être vu sur ma page avec le jeu, le principe est le même, vous cliquez sur l'image, une fenêtre avec le jeu apparaît. J'ai fait cela parce que l'extension du jeu est plus large que ma colonne de contenu, j'ai donc trouvé un tel moyen de sortir de la situation.
Considérons une fenêtre modale sur css, pour ne pas nous tromper, nous utiliserons des styles, c'est-à-dire qu'elle prescrit des styles dans le fichier principal et du code dans notre fenêtre, nous examinerons tout en détail, quoi et comment.
Fenêtre modale en css, comment faire une fenêtre modale
La première chose dont nous avons besoin est les styles, copiez le code complet avec les styles ci-dessous et collez-le dans votre fichier de style principal, c'est-à-dire dans style.css
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | . Fenêtre ( 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.7 ) ; z-index : 99999 ; - webkit- transition : opacité 400 ms en douceur ; - moz- transition : opacité 400 ms en douceur ; transition : opacité 400 ms en douceur ; affichage : aucun ; événements de pointeur : aucun ; ) . Fenêtre : cible (affichage : bloc ; événements de pointeur : auto ; ) . Fenêtre > div ( largeur : 460px ; position : relative ; marge : 10 % auto ; rembourrage : 30px 10px 10px ; border-radius : 10px ; arrière-plan : #fff ; box-shadow : 0px 0px 20px 2px ; ) . close ( arrière-plan : #cc3300 ; 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 : 12 px ; - moz- border- radius : 12 px ; border- radius : 12 px ; - moz- box-shadow : 1px 1px 3px #000 ; - webkit- box-shadow : 1px 1px 3px #000 ; boîte-ombre : 1px 1px 3px #000 ; ) . fermer : survoler ( arrière-plan : #990000; ) |
Fenêtre ( 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.7) ; z-index : 99999 ; -webkit-transition : opacité 400 ms en douceur ; -moz-transition : opacité 400 ms en douceur ; transition : opacité 400 ms en douceur ; affichage : aucun ; événements de pointeur : aucun ; ) .Window:target ( display : block; pointer-events: auto; ) .Window > div ( width: 460px; position: relative; margin: 10% auto; padding: 30px 10px 10px; border-radius: 10px; background: #fff; box-shadow: 0px 0px 20px 2px; ) .close ( arrière-plan : #cc3300 ; couleur : #FFFFFF ; hauteur de ligne : 25px ; position : absolue ; droite : -12px ; alignement du texte : centre ; haut : -10px ; largeur : 24px ; texte -décoration : aucune ; épaisseur de la police : gras ; -webkit-border-radius : 12 px ; -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 ( fond : #990000; )
Nous économisons, vous pouvez jouer avec les styles et rendre quelque chose de plus beau, changer l'arrière-plan, créer un autre cadre, etc. Accédez à la page où vous souhaitez que cette fenêtre s'affiche et collez le code suivant :
| 1 2 3 4 5 6 7 | < a href= "#ModalOpen" title= "" >Bouton < div id= "ModalOpen" class = "Window" > < div> < a href= "#close" title= "Fermer" class = "close" >XVoici le contenu de la fenêtre |
Bouton
Maintenant analysons un peu ce qu'il y a dedans, vous devez le changer. Où est-il écrit "Bouton" là, vous pouvez insérer, comme une image et du texte, ce que vous voulez, c'est-à-dire que lorsque vous cliquez dessus, une fenêtre s'ouvrira. Où il est écrit "Le contenu de la fenêtre sera ici" collez ce que vous aimeriez voir dans la fenêtre contextuelle, c'est pratiquement tout.
DES NOUVELLES!
Eh bien, le dernier mais non le moindre, les nouvelles, comme toujours, j'ai déjà fait quelque chose avec les nouvelles)) Je me suis fait une petite page avec un programme d'affiliation, sous la forme de, je demande à tout le monde d'y aller et de voir si quelqu'un peut donner des conseils plus intéressants, par exemple, pour ajouter quelque chose, eh bien, vous savez de quoi je parle. Il y a encore des réflexions dessus, pour ajouter une vidéo avec moi, peut-être une consigne, enfin un truc comme ça, en général, j'attends votre commentaire !
