Maison  >  Article  >  interface Web  >  Code simple pour implémenter une couche de masque à l'aide de jQuery CSS compatible avec les navigateurs grand public_jquery

Code simple pour implémenter une couche de masque à l'aide de jQuery CSS compatible avec les navigateurs grand public_jquery

WBOY
WBOYoriginal
2016-05-16 16:34:181205parcourir

Cliquez sur « S'inscrire » sur la page, et un calque de masque noir avec opacité apparaîtra ; au-dessus du calque de masque se trouve la boîte d'enregistrement à ce moment, les autres éléments de la page, à l'exception de la boîte d'enregistrement, ne peuvent pas être cliqués ; " sur la case d'inscription Promenez-vous " et le masque disparaît.

Adresse d'aperçu :

http://jsfiddle.net/p2x3c7df/embedded/result/

Points clés :

1. La zone d'inscription est toujours centrée horizontalement et verticalement, y compris lors du défilement de la page de haut en bas avec la molette de la souris, du zoom sur la page et du redimensionnement de la fenêtre du navigateur

Principalement contrôlée par CSS, la largeur et la hauteur de la zone d'enregistrement ont été déterminées (620*420px). Utilisez d'abord position:fixed pour la rendre absolument positionnée par rapport à la fenêtre du navigateur, puis centrez-la verticalement : top:50 ; % ; gauche :50 % ; marge :-210px 0 0 -310px ;

2. Lors du zoom sur la page et du redimensionnement de la fenêtre du navigateur, le calque de masque doit toujours couvrir l'intégralité du document et remplir toute la fenêtre visible du navigateur ainsi que les parties qui doivent défiler pour parcourir. différents navigateurs de noyau tels que Chrome et appareil IE

.

Deux propriétés importantes : window.screen.availHeight de js et $(document.body).outerHeight(true) de jQuery. window.screen.availHeight fait référence à la hauteur de la zone de travail disponible de l'écran, et $(document.body).outerHeight(true) fait référence à la largeur totale du corps du document de la fenêtre actuelle du navigateur, y compris marge de remplissage de bordure. window.screen.availHeight est principalement utilisé pour IE (11) pour garantir que le calque de masque peut toujours remplir la fenêtre du navigateur après la mise à l'échelle de la page.

3. Lorsque le calque de masque apparaît, la page peut toujours défiler de haut en bas, mais les autres éléments de la page, à l'exception de la zone de connexion, ne peuvent pas être utilisés

Code :

HTML (besoin de tester des documents suffisamment élevés) :

Copier le code Le code est le suivant :


   
   

   
   
   
       

           
                注册
           

       

        Le suicide.
        Entre-temps, Monte-Cristo était également revenu en ville avec Emmanuel et Maximilien. Leur retour fut joyeux. Emmanuel ne cachait pas sa joie de la conclusion pacifique de l'affaire et exprimait haut et fort ses expressions de joie. Morrel, dans un coin de la voiture, laissait la gaieté de son beau-frère se dépenser en paroles, tandis qu'il éprouvait une joie intérieure égale, qui ne se trahissait cependant que dans son visage. A la barrière du Trône, ils rencontrèrent Bertuccio, qui attendait là, immobile comme une sentinelle à son poste. Monte-Cristo passa la tête à la portière, échangea quelques mots avec lui à voix basse, et l'intendant disparut. « Comte, dit Emmanuel, lorsqu'ils furent au bout de la place Royale, déposez-moi à ma porte, afin que ma femme n'ait pas un moment d'inquiétude inutile à mon sujet ou à votre compte. »
        " S'il n'était pas ridicule de faire étalage de notre triomphe, j'inviterais le comte chez nous ; d'ailleurs il a sans doute quelque cœur tremblant à consoler. Nous prendrons donc congé de notre ami et le laisserons se hâter chez nous. "
        « Arrêtez-vous un instant, » dit Monte-Cristo ; " Ne me laissez pas perdre mes deux compagnons. Revenez, Emmanuel, auprès de votre charmante épouse, et présentez-lui mes meilleurs compliments ; et toi, Morrel, accompagnez-moi aux Champs-Élysées. "
        « Volontiers, » dit Maximilien ; "d'autant plus que j'ai des affaires dans ce quartier-là."
        « Devrions-nous vous attendre le petit-déjeuner ? » demanda Emmanuel.
        "Non", répondit le jeune homme. La porte fut fermée et la voiture partit. "Voyez quelle chance je vous ai apporté!" dit Morrel lorsqu'il fut seul avec le comte. "Tu ne le penses pas ?"
        "Oui", dit Monte-Cristo; " c'est pour cela que je voulais te garder près de moi. "
        "C'est miraculeux !" continua Morrel en répondant à ses propres pensées.
        "Quoi?" dit Monte-Cristo.
        "Ce qui vient de se passer."
        "Oui," dit le comte, "vous avez raison, c'est miraculeux."
        — Car Albert est courageux, reprit Morrel.
        « Très courageux, » dit Monte-Cristo ; "Je l'ai vu dormir avec une épée suspendue au-dessus de sa tête."

        "Elle va quitter sa maison", dit l'intendant.
        "Et son fils ?"
        "Florentin, son valet de chambre, pense qu'il va faire de même."
        "Viens par ici." Monte-Cristo emmena Bertuccio dans son cabinet, écrivit la lettre que nous avons vue et la remit à l'intendant. "Allez", dit-il rapidement. "Mais d'abord, que Haidee soit informé de mon retour."
        « Me voici », dit la jeune fille qui, au bruit de la voiture, avait dévalé l'escalier et dont le visage rayonnait de joie de voir le comte revenir sain et sauf. Bertuccio est parti. Tous les transports d'une fille trouvant un père, tous les délices d'une maîtresse voyant un amant adoré, furent ressentis par Haidee dans les premiers instants de cette rencontre qu'elle attendait avec tant d'impatience. Sans doute, quoique moins évidente, la joie de Monte-Cristo n'en était pas moins intense. La joie des cœurs qui ont longtemps souffert est comme la rosée sur la terre après une longue sécheresse ; le cœur et le sol absorbent tous deux cette humidité bienfaisante qui tombe sur eux, et rien n'est visible extérieurement.
        Monte-Cristo commençait à penser, ce qu'il n'avait plus osé croire depuis longtemps, qu'il y avait deux Mercedes dans le monde et qu'il pouvait encore être heureux. Son œil, exalté de bonheur, lisait avec impatience le regard en larmes de Haidee, quand soudain la porte s'ouvrit. Le comte fronça les sourcils. « M. de Morcerf ! » dit Baptistin, comme si ce nom suffisait à son excuse. En fait, le visage du comte s’éclaira.
        « Lequel, demanda-t-il, le vicomte ou le comte ?
        "Le comte."
        "Oh," s'exclama Haidee, "ce n'est pas encore fini ?"
        — Je ne sais si c'est fini, mon enfant bien-aimé, dit Monte-Cristo en prenant les mains de la jeune fille ; "mais je sais que tu n'as plus rien à craindre."
        "Mais ce sont les misérables" --
        « Cet homme ne peut pas me faire de mal, Haidee, » dit Monte-Cristo ; "c'était son fils seul qu'il y avait à craindre."
        « Et ce que j'ai souffert, dit la jeune fille, vous ne le saurez jamais, monseigneur. Monte-Cristo sourit. « Par le tombeau de mon père, dit-il en étendant la main sur la tête de la jeune fille, je te jure, Haidee, que s'il arrive quelque malheur, ce ne sera pas pour moi.
        La porte était grande ouverte, un fiacre se tenait au milieu de la cour, spectacle étrange devant une si noble demeure ; le comte le regarda avec terreur, mais sans oser s'enquérir de sa signification, il se précipita vers son appartement. Deux personnes descendaient les escaliers ; il n'eut que le temps de se glisser dans une alcôve pour les éviter. C'était Mercedes qui s'appuyait sur le bras de son fils et quittait la maison. Ils passèrent près du malheureux qui, caché derrière le rideau de damas, sentit presque lui frôler la robe de Mercedes, et le souffle chaud de son fils, prononçant ces mots : « Courage, maman ! Viens, ce n'est plus notre maison ! " Les mots s'éteignirent, les pas se perdirent au loin. Le général se redressa en s'accrochant au rideau ; il poussa le sanglot le plus affreux qui ait jamais échappé au sein d'un père abandonné à la fois par sa femme et son fils. Il entendit bientôt le bruit de la marche de fer du fiacre, puis la voix du cocher, puis le roulis du lourd véhicule qui fit trembler les vitres. Il se précipita dans sa chambre pour revoir tout ce qu'il avait aimé au monde ; mais le fiacre continuait, et ni la tête de Mercedes ni celle de son fils ne parurent à la fenêtre pour jeter un dernier regard sur la maison ou sur le père et le mari abandonnés. Et au moment même où les roues de ce carrosse franchissaient la porte d'entrée, une détonation se fit entendre, et une épaisse fumée s'échappa d'une des vitres de la fenêtre, qui fut brisée par l'explosion.
        La porte était grande ouverte, un fiacre se tenait au milieu de la cour, spectacle étrange devant une si noble demeure ; le comte le regarda avec terreur, mais sans oser s'enquérir de sa signification, il se précipita vers son appartement. Deux personnes descendaient les escaliers ; il n'eut que le temps de se glisser dans une alcôve pour les éviter. C'était Mercedes qui s'appuyait sur le bras de son fils et quittait la maison. Ils passèrent près du malheureux qui, caché derrière le rideau de damas, sentit presque lui frôler la robe de Mercedes, et le souffle chaud de son fils, prononçant ces mots : « Courage, maman ! Viens, ce n'est plus notre maison ! " Les mots s'éteignirent, les pas se perdirent au loin. Le général se redressa en s'accrochant au rideau ; il poussa le sanglot le plus affreux qui ait jamais échappé au sein d'un père abandonné à la fois par sa femme et son fils. Il entendit bientôt le bruit de la marche de fer du fiacre, puis la voix du cocher, puis le roulis du lourd véhicule qui fit trembler les vitres. Il se précipita dans sa chambre pour revoir tout ce qu'il avait aimé au monde ; mais le fiacre continuait, et ni la tête de Mercedes ni celle de son fils ne parurent à la fenêtre pour jeter un dernier regard sur la maison ou sur le père et le mari abandonnés. Et au moment même où les roues de ce carrosse franchissaient la porte d'entrée, une détonation se fit entendre, et une épaisse fumée s'échappa d'une des vitres de la fenêtre, qui fut brisée par l'explosion.
   


HTML

CSS:

复制代码 代码如下 :

une{text-decoration:aucun; couleur :#fff;}
#rbox{

    largeur : 620 px ;
    hauteur : 420 px ;
    position : fixe ;
    haut : 50 % ;
    gauche : 50 % ;
    marge : -210px 0 0 -310px ;
    rayon de bordure : 8 px ; /*圆角*/
    couleur d'arrière-plan : #999 ;
    indice z : 3 ;
    affichage : aucun ;   
>

.aller{

    position:absolue;
    à droite : 10 px ;
    haut : 10px ;
    rembourrage : 5px 12px ;
    arrière-plan : rgba(0,0,0,.4);
    box-shadow : 0 0 0 2px rgba(255,255,255,.4);
    couleur : #fff;
    rayon de bordure : 26 px ;
>

#masque{

    couleur d'arrière-plan : #000 ;
    position : absolue ;
    haut : 0 ;
    gauche : 0 ;
    affichage : aucun ;
    indice z : 2 ;
>

#register{ z-index:1; couleur:bleu;>
.content{largeur :800px ; hauteur : auto ; marge : 0 auto ;🎜>

JS:

复制代码 代码如下 :

$(fonction(){
 
//Cliquez pour vous inscrire
$("#register").click(function(){
 
Si(window.screen.availHeight > $(document.body).outerHeight(true)){
                             
//Lorsque la hauteur de la zone de travail disponible de l'écran > la hauteur totale du corps du document de la fenêtre actuelle du navigateur, y compris la marge de remplissage de la bordure (lors du zoom)
               $("#mask").show().css({"opacity":"0.5","width":"100%","height":window.screen.availHeight});
         }autre{
                             
$("#mask").show().css({"opacity":"0.5","width":"100%","height":$(document.body).outerHeight(true)});
                                                                                                  $("#rbox").show();                                                          });

//Ajustez la largeur et la hauteur du masque en fonction des changements dans la fenêtre visible du navigateur afin que le masque remplisse le navigateur

$(window).resize(function(){                                
//Modifiez la largeur et la hauteur du masque en fonction des changements dans la fenêtre du navigateur afin que le masque remplisse tout le navigateur
Si($("#mask").css("width")!=0){

                                                                                                                                                                                                                                        $("#masque ").css(""width",""100%"); //La largeur peut également être jugée si nécessaire
if(window.screen.availHeight > $(document.body).outerHeight(true)){

                                                                                     $("#mask").css({"opacity":"0.5","width":"100%","height":window.screen.availHeight});

               }autre{

                                                                                     $("#mask").css({"opacity":"0.5","width":"100%","height":$(document.body).outerHeight(true)});

            }
>
});

$(".go").click(function(){
 
          $("#mask").hide();
          $("#rbox").hide();
});

});




Cette fonction est terminée.

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