L'effet de couche de masque translucide est essentiellement obtenu à l'aide de plug-ins. Permettez-moi de partager avec vous l'utilisation de JS natifs pour réaliser un effet de masque translucide. Les amis intéressés peuvent y faire référence. J'espère qu'il vous sera utile de vous familiariser avec le JS natif.
<div> <h4> <span> Inscrivez-vous maintenant </span> <span> Close </span> </h4> <p> <bablow> nom d'utilisateur </ labe> <entrée type = "Text" OnMouseover = "this.style.borter = '1px solide # f60'" onfoucs = "this.style.border = '1px solide # f60'" "" " onblur = "this.style.border = '1px solide #ccc'" /> </p> <p> <p> <label> mot de passe </ labe> <entrée type = "mot de passe" onMouseover = "this.style.borter = '1px solide # f60'" onfoucs = "this.style.border = '1px solide # f60'" "" " onblur = "this.style.border = '1px solide #ccc'" /> </p> <p> <input type = "soumi" value = "registre" /> <input type = "reset" value = "reset" /> </ p> </ div> <div> </ div> <! - mask coucher div -> <script type = "text / javascript"> var myaLert = document.getElementById ("alert"); var mymask = document.getElementById ('mask'); var reg = document.getElementById ("Content"). GetElementsByTagName ("A") [0]; var mclose = document.getElementById ("close"); reg.onclick = function () {mymask.style.display = "block"; myAlert.style.display = "bloc"; myAlert.style.position = "Absolute"; myAlert.style.top = "50%"; myAlert.style.left = "50%"; myAlert.style.Margintop = "-75px"; myAlert.style.marginleft = "-150px"; document.body.style.overflow = "Hidden"; } mclose.onclick = function () {myAlert.style.display = "Aucun"; mymask.style.display = "Aucun"; } </ script> </ body> </html>Couverture en plein écran
<! Doctype html> <style> #mask {position: fixe; largeur: 100%; En haut: 0px; gauche: 0px; _Position: Absolute; _top: expression (documentElement.scrollTop); Contexte: RGBA (0,0,0,0,5); Contexte: transparent / 9; Filtre: PROGID: DximAreTransform.Microsoft.gradient (startColorstr = # 80000000, EndColorstr = # 80000000); Affichage: Aucun;} # mask_td {text-align: Center;} </ style> <img src = "http://web-tinker.com/images/themagicconch.jpg" id = "img" /> <table id = "mask"> <tr> <td id = "Mask_td"> </td> var isie = navigator.useragent.match (/ msie (/ d) / i); Isie = Isie? Isie [1]: ISIE; // Déclare la variable var img, masque; // Obtenez l'élément img = document.getElementById ("img"); mask = document.getElementById ("mask"); mask.td = document.getElementByid ("mask_td"); // calculer la taille de masque masque.setSize = function () {// Obtenez la largeur de la zone de visible du document et l'installez-le au masque var de = document.documentElement; mask.style.width = de.clientwidth + "px" mask.style.height = de.clientheight + "px" mask.style.height = de.clientheight + "px";}; // ajouter la méthode de l'émission masque.show = function () "body" body " ] .style.overflow = "Hidden"; // calculer la taille du masque masque.setSize (); // montre mask.style.display = Isie == 6? "Block": "Table";}; // Ajouter une méthode masquée masque.hide = function () {// Afficher la page de scrollbar document [ISIE <9? "DocumentElement": "body"] .style.overflow = ""; // efface le contenu dans mask.td.innerhtml = ""; // masquer mask.style.display = "Aucun";}; // Ajouter une méthode de l'annexe mask.append = function (e) {// ajouter du contenu dans Mask TD, vous masquez.td.appendChild (e);}; // cliquez sur Mask pour clôturer Mask.onclick = fonction (e) {// juge la source de l'événement, si la zone de blanc est cliquée, Close Mask E = E | (e.target || e.srcelement) == mask.td && mask.hide ();}; // ajouter la taille du masque lorsque la taille du formulaire modifie la fenêtre.onResize = function () {mask.setsize ();}; // cliquez sur l'événement de l'image img.onclick = function () {) {// créer un objet image var o o = new image; // Définissez l'adresse d'image o.src = img.src; // Ajouter un masque de contenu.APPEND (O); // montre Mask mask.show ();}; </script>