Maison  >  Article  >  interface Web  >  Calque de masque de page et empêche le corps de la page de défiler. Principe de la boîte modale Bootstrap_CSS/HTML

Calque de masque de page et empêche le corps de la page de défiler. Principe de la boîte modale Bootstrap_CSS/HTML

WBOY
WBOYoriginal
2016-05-16 12:03:363145parcourir

Idées de mise en œuvre :

1. Il doit y avoir une couche pour recouvrir le corps et la placer au-dessus du corps.

2. Modifiez la valeur de l'attribut de débordement du corps en : caché

Fin de bêtises, le code clé est affiché, compatible avec Firefox, Google et IE

Le code de style du calque de masque, la partie rouge est la partie clé

Copier le code Le code est le suivant :

.cover {
position : fixe ; haut : 0px ; droite : 0px ; filtre : alpha(opacité=60) ; couleur d'arrière-plan : #777 ;
z-index : 1002 ; ; display:aucun;
opacité:0.5; -moz-opacity:0.5;
}

Code pour la partie de page Web

Copier le code Le code est le suivant :

Partie JS du code

Copier le code Le code est le suivant :

fonction showMask(){
$ ('body ').css("overflow","hidden")
$("#cover").show();
}
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn