Présentation
Dans cette leçon, je ne révélerai pas le secret aux concepteurs agencés et aux gourous css, mais cet article sera utile pour les débutants. c'est ici que vous pouvez apprendre à créer des fenêtres pop-up sur un site entier.
Le plus souvent, ces fenêtres apparaissent après avoir effectué certaines actions sur le site, par exemple, l'utilisateur clique sur le lien "Demander un rappel" et un bon de commande apparaît devant lui.
Il est très pratique d'utiliser des fenêtres PopUp en conjonction avec ajax, mais c'est le sujet d'une autre leçon.
De plus en plus de ressources Web commencent à apparaître sur le réseau qui utilisent des pop-ups PopUp. À titre d'exemple, nous pouvons donner à chacun des réseaux sociaux familiers.
Toutes les données excédentaires des captures d'écran sont supprimées.Vkontakte
Facebook
Twitter
Je pense qu'il y a suffisamment de raisons pour commencer à étudier la question: comment faire pop-up PopUp sur votre site.
Énoncé du problème (TOR)
Vous devez créer une fenêtre pop-up avec un écran de gradation au-dessus de l'ensemble du site.
Solution
Méthode 1
html
<div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div>
css
*{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; height: 2000px; 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; }
Résultat:
Très souvent, ils suggèrent d'utiliser:
position:absolute;
Oui, le résultat est similaire, mais du fait que nous avons réglé la hauteur du bloc de "gradation", des barres de défilement apparaissent. C'est pourquoi cette méthode ne convient pas.
Méthode 2
Cette méthode ne diffère pas fondamentalement de la méthode 1, mais je la trouve plus pratique.
Html (pas de changement)
<div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div>
Css
*{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #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.
En raison de la propriété:
min-hauteur: 100%; notre bloc «dimming» a acquis une largeur de 100% et une
hauteur minimale de 100% de l'écran.
Le seul inconvénient de cette méthode est qu'Internet Explorer prend en charge cette propriété uniquement à partir de la version 8.0.
Ajout de magie à Jquery
Ajoutez maintenant des liens pour masquer / afficher notre popup.
Pour ce faire, vous devez connecter la bibliothèque jQuery et un petit script:
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> <script> $(document).ready(function(){
Vous devez également mettre à jour le HTML:
<div class="b-container"> Sample Text <a href="javascript:PopUpShow()">Show popup</a> </div> <div class="b-popup" id="popup1"> <div class="b-popup-content"> Text in Popup <a href="javascript:PopUpHide()">Hide popup</a> </div> </div>
Résultat
Maintenant, lorsque la page se charge, la fenêtre contextuelle PopUp disparaît.
Si nous cliquons sur le lien «Show popup», une fenêtre pop-up apparaîtra. Et si vous cliquez sur le lien "Masquer la popup", la fenêtre pop-up disparaîtra à nouveau.
Le résultat peut être vu ici:
http://jsfiddle.net/p7NbX/15/