Supposons que nous ayons un conteneur conteneur comme suit :
Copiez le code comme suit :
<style type="text/css">
#conteneur{largeur:auto;hauteur:auto; débordement:caché;}
/*L'attribut overflow:hidden; ici sert principalement à définir la partie au-delà du conteneur pour qu'elle soit automatiquement masquée. La raison pour laquelle cet attribut est défini est pour résoudre le problème de compatibilité du navigateur d'IE8 et des versions inférieures*/.
</style>
<div id="conteneur" >
</div>
Nous voulons maintenant faire apparaître une couche div dans la page Web afin que le conteneur ne puisse pas être utilisé avant de fermer la couche div contextuelle.
Ensuite, nous devons d’abord définir la couche div de ce masque comme suit :
Copiez le code comme suit :
<div id="continer">
<!―Placez simplement le calque de masque à l'intérieur du conteneur
<divid=”shade” style=”width:1600px;height:900px;/*Donnez une taille initiale au calque de masque*/”>
<input name="close" id="close" value="close">
</div>
</div>
Ensuite, utilisez js pour que le calque de masque s'affiche toujours à l'écran et que le contenu sous le calque de masque ne puisse pas être manipulé. Cliquez sur le bouton Fermer pour fermer le calque de masque.
Copiez le code comme suit :
<script type="text/javascript">
$(fonction(){
//Obtenir la largeur et la hauteur internes du navigateur actuel
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//Définit la largeur et la hauteur du calque de masque
$("#shade").width(nWidth);
$("#shade").hauteur(nHauteur);
//Définit le bouton de fermeture à afficher au centre
$("#close").css("margin-top",nHeight/2-50+"px");
//Définit l'événement qui est déclenché lorsque la taille du navigateur change
$(window).resize(function(){
//Obtenir la largeur et la hauteur internes du navigateur actuel
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//Définit la largeur et la hauteur du calque de masque
$("#shade").width(nWidth);
$("#shade").hauteur(nHauteur);
//Définit le bouton de fermeture à afficher au centre
$("#putPwd").css("margin-top",nHeight/2-50+"px");
});
//Définissez le bouton de fermeture pour éliminer le calque de masque
$("#close").click(function(){
$("#shade").removeAttr("id");
$("#shade").html("");
});
//Il peut aussi être écrit en pur js
Document.getElementById("shade").style…….;
//Inutile d'en dire plus plus tard. Si vous êtes intéressé mais que vous ne savez vraiment pas écrire, vous pouvez me contacter.
})
</script>