déclaration
La lecture de cet article nécessite un certain HTML de base, CSS et JavaScript
conception
L'idée de réaliser l'effet de calque contextuel est très simple: masquer le contenu à afficher en premier et afficher le contenu à l'origine caché après avoir déclenché une certaine condition (comme cliquer sur un bouton).
accomplir
<! Doctype html> <html> <éad- head> <itle> objet de fenêtre </ title> <meta charset = "utf-8"> </ head> <body> <a href = "http://www.baidu.com"> baidu </a> <bouton type = "Button" id = "open"> ouvrir le calom LightBlue; Border: 1px Green massif; " id = "toast"> <! - Définissez l'attribut d'affichage sur None pour masquer le contenu -> <p> Il s'agit du contenu de calque pop-up </p> <Button type = "Button" ID = "Fermer"> Fermez le calque pop-up </siving> </div> <script type = "Text / Javascript"> var Toast = Document.getElementyId ("Toast"); document.getElementById ("Open"). OnClick = fonction (e) {<! - Définissez l'événement de clic pour afficher le contenu caché -> toast.style.display = "block"; toast.style.position = "fixe"; var winwidth = window.innerwidth; var winheight = window.innerheight; var TargetWidth = toast.offsetWidth; var targetheight = toast.offsetheight; toast.style.top = (winheight - targetheight) / 2 + "px"; toast.style.left = (winwidth - ciblewidth) / 2 + "px"; } document.getElementById ("close"). onClick = function (e) {<! - Masquer le contenu affiché à nouveau-> toast.style.display = "Aucun"; } </ script> </ body> </html>L'effet d'affichage est le suivant:
Mais nous pouvons remarquer qu'après que le contenu caché apparaisse, nous pouvons toujours entrer la page Baidu via le lien. Pour éviter que cela ne se produise, nous pouvons fournir une couche de masque pour couvrir tout le contenu de la page d'origine. Le code est le suivant:
<! Doctype html> <html> <éad- head> <itle> objet de fenêtre </ title> <meta charset = "utf-8"> </ head> <body> <a href = "http://www.baidu.com"> baidu </a> <bouton type = "Button" id = "open"> ouvrir le calom Aucun; position: fixe; largeur: 100%; hauteur: 100%; en haut: 0px; gauche: 0px; fond: gris; "> <! - Masque l'arrière-plan à travers la couche de masque -> <div style =" fond: LightBlue; Border: 1px Green solide; " id = "toast"> <! - Définissez l'attribut d'affichage à aucun pour masquer le contenu -> <p> voici le contenu de calque pop-up </p> <bouton type = "Button" id = "close"> Fermez le calque pop-up </utton> </div> </div> <script type = "Text / Javascript"> var Toast = Document.getElementyd ("Toast"); var couvercle = document.getElementById ("couverture"); document.getElementById ("Open"). OnClick = fonction (e) {<! - Définissez l'événement de clic pour afficher le contenu caché -> cover.style.display = "block"; toast.style.position = "fixe"; var winwidth = window.innerwidth; var winheight = window.innerheight; var TargetWidth = toast.offsetWidth; var targetheight = toast.offsetheight; toast.style.top = (winheight - targetheight) / 2 + "px"; toast.style.left = (winwidth - ciblewidth) / 2 + "px"; } document.getElementById ("close"). onClick = function (e) {<! - Masquer le contenu affiché à nouveau-> cover.style.display = "None"; } </ script> </ body> </html>C'est à nouveau le résultat du test suivant, comme indiqué dans la figure ci-dessous:
Résumer
Le contenu ci-dessus implémente simplement l'effet de couche pop-up, mais en ajoutant plus de code, des fonctions plus complexes peuvent être implémentées sur cette base.
L'exemple simple ci-dessus de l'utilisation de JavaScript pour réaliser l'effet de couche pop-up est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.