Heim > Web-Frontend > js-Tutorial > Einfacher Code zum Implementieren der Maskenebene mithilfe von jQuery CSS, kompatibel mit Mainstream-Browsern_jquery

Einfacher Code zum Implementieren der Maskenebene mithilfe von jQuery CSS, kompatibel mit Mainstream-Browsern_jquery

WBOY
Freigeben: 2016-05-16 16:34:18
Original
1221 Leute haben es durchsucht

Klicken Sie auf der Seite auf „Registrieren“. Über der Maskenebene wird zu diesem Zeitpunkt das Registrierungsfeld angezeigt. Andere Elemente auf der Seite außer dem Registrierungsfeld können nicht angeklickt werden. „auf dem Anmeldefeld Einfach einen Spaziergang machen“ und die Maske verschwindet.

Vorschauadresse:

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

Wichtige Punkte:

1. Das Registrierungsfeld ist immer horizontal und vertikal zentriert, auch wenn Sie die Seite mit dem Mausrad nach oben und unten scrollen, die Seite zoomen und die Größe des Browserfensters ändern

Die Breite und Höhe des Registrierungsfelds wurde hauptsächlich durch CSS bestimmt (620*420px), um es absolut relativ zum Browserfenster zu positionieren; dann wird es vertikal zentriert: top:50 %; links:50%; Rand:-210px 0 0 -310px;

2. Beim Zoomen der Seite und Ändern der Größe des Browserfensters muss die Maskenebene immer das gesamte Dokument abdecken und das gesamte im Browser sichtbare Fenster sowie die Teile ausfüllen, mit denen gescrollt werden muss verschiedene Kernel-Browser wie Chrome und IE-Gerät;

Zwei wichtige Eigenschaften: window.screen.availHeight von js und $(document.body).outerHeight(true) von jQuery. window.screen.availHeight bezieht sich auf die Höhe des verfügbaren Arbeitsbereichs des Bildschirms und $(document.body).outerHeight(true) bezieht sich auf die Gesamtbreite des Dokumentkörpers des aktuellen Fensters des Browsers, einschließlich Randpolsterungsrand. window.screen.availHeight wird hauptsächlich für IE (11) verwendet, um sicherzustellen, dass die Maskenebene nach der Skalierung der Seite das Browserfenster weiterhin füllen kann.

3. Wenn die Maskenebene angezeigt wird, kann die Seite weiterhin nach oben und unten gescrollt werden, aber andere Elemente auf der Seite außer dem Anmeldefeld können nicht bedient werden

Code:

HTML (Dokumente mit ausreichend hoher Qualität müssen getestet werden):

Code kopieren Der Code lautet wie folgt:


   
   

   
   
   
       

           
                注册
           

       

        Der Selbstmord.
        Inzwischen war auch Monte Christo mit Emmanuel und Maximilian in die Stadt zurückgekehrt. Ihre Rückkehr war fröhlich. Emmanuel verbarg seine Freude über den friedlichen Abschluss der Angelegenheit nicht und äußerte laut seine Freude. Morel, der in einer Ecke des Wagens saß, ließ die Fröhlichkeit seines Schwagers sich in Worten ausdrücken, während er die gleiche innere Freude empfand, die sich jedoch nur in seinem Gesicht verriet. An der Barriere du Trone trafen sie Bertuccio, der dort regungslos wie ein Wachposten auf seinem Posten wartete. Monte Christo steckte den Kopf aus dem Fenster, wechselte leise ein paar Worte mit ihm, und der Verwalter verschwand. „Graf“, sagte Emmanuel, als sie am Ende des Place Royale waren, „stellen Sie mich an meiner Tür ab, damit meine Frau keinen einzigen Moment unnötiger Sorge um meine oder Ihretwegen haben möchte.“
        „Wenn es nicht lächerlich wäre, unseren Triumph zur Schau zu stellen, würde ich den Grafen in unser Haus einladen; außerdem hat er zweifellos ein zitterndes Herz zu trösten. Wir werden uns also von unserem Freund verabschieden und ihn nach Hause eilen lassen.“ "
        „Halten Sie einen Moment inne“, sagte Monte Christo; „Lass mich nicht meine beiden Gefährten verlieren. Kehre, Emmanuel, zu deiner bezaubernden Frau zurück und überbringe ihr meine besten Komplimente; und du, Morel, begleite mich zu den Champs-Élysées.“
        „Gerne“, sagte Maximilian; „Vor allem, weil ich in diesem Viertel Geschäfte habe.“
        „Sollen wir das Frühstück auf dich warten?“ fragte Emmanuel.
        „Nein“, antwortete der junge Mann. Die Tür wurde geschlossen und der Wagen fuhr weiter. „Sehen Sie, was für ein Glück ich Ihnen gebracht habe!“ sagte Morel, als er mit dem Grafen allein war. „Hast du das nicht gedacht?“
        „Ja“, sagte Monte Christo; „Deshalb wollte ich dich in meiner Nähe behalten.“
        „Es ist ein Wunder!“ fuhr Morel fort und beantwortete seine eigenen Gedanken.
        "Was?" sagte Monte Christo.
        „Was ist gerade passiert.“
        „Ja“, sagte der Graf, „Sie haben recht – es ist ein Wunder.“
        „Denn Albert ist mutig“, fuhr Morel fort.
        „Sehr mutig“, sagte Monte Cristo; „Ich habe ihn mit einem Schwert über dem Kopf schlafen sehen.“

        „Sie wird ihr Haus verlassen“, sagte der Verwalter.
        „Und ihr Sohn?“
        „Florentin, sein Kammerdiener, glaubt, dass er dasselbe tun wird.“
        „Komm hier entlang.“ Monte Christo nahm Bertuccio mit in sein Arbeitszimmer, schrieb den Brief, den wir gesehen hatten, und übergab ihn dem Verwalter. „Geh“, sagte er schnell. „Aber zuerst soll Haidee darüber informiert werden, dass ich zurückgekehrt bin.“
        „Hier bin ich“, sagte das junge Mädchen, das beim Geräusch der Kutsche die Treppe hinuntergerannt war und dessen Gesicht vor Freude strahlte, als es den Grafen sicher zurückkommen sah. Bertuccio ging. Haidee spürte in den ersten Momenten dieses Treffens, auf das sie so sehnsüchtig gewartet hatte, die ganze Entzückung einer Tochter, die einen Vater findet, die ganze Freude einer Geliebten, wenn sie einen verehrten Liebhaber sieht. Zweifellos, wenn auch weniger offensichtlich, war Monte Christos Freude nicht weniger groß. Freude für Herzen, die lange gelitten haben, ist wie der Tau auf der Erde nach einer langen Dürre; Sowohl das Herz als auch der Boden absorbieren die wohltuende Feuchtigkeit, die auf sie fällt, und äußerlich ist nichts erkennbar.
        Monte Christo begann zu denken, was er schon lange nicht mehr zu glauben gewagt hatte: dass es zwei Mercedes auf der Welt gab und er vielleicht doch glücklich sein würde. Sein vor Glück erfülltes Auge las eifrig den tränenreichen Blick von Haidee, als sich plötzlich die Tür öffnete. Der Graf runzelte die Stirn. „Herr de Morcerf!“ sagte Baptistin, als ob dieser Name als Entschuldigung ausreichen würde. Tatsächlich hellte sich das Gesicht des Grafen auf.
        „Welcher“, fragte er, „der Viscount oder der Graf?“
        „Der Graf.“
        „Oh“, rief Haidee, „ist es noch nicht vorbei?“
        „Ich weiß nicht, ob es fertig ist, mein geliebtes Kind“, sagte Monte Christo und ergriff die Hände des jungen Mädchens; „Aber ich weiß, dass du nichts mehr zu befürchten hast.“
        „Aber es ist das Elende“ –
        „Dieser Mann kann mir nichts tun, Haidee“, sagte Monte Christo; „Es war allein sein Sohn, der Anlass zur Angst gab.“
        „Und was ich erlitten habe“, sagte das junge Mädchen, „du wirst es nie erfahren, mein Herr.“ Monte Christo lächelte. „Beim Grab meines Vaters“, sagte er und streckte seine Hand über den Kopf des jungen Mädchens, „ich schwöre dir, Haidee, dass, wenn irgendein Unglück passiert, es nicht mir widerfahren wird.“
        Die Tür stand weit offen, eine Mietkutsche stand mitten im Hof ​​– ein seltsamer Anblick vor einem so edlen Herrenhaus; Der Graf sah es mit Entsetzen an, wagte aber nicht, nach der Bedeutung zu fragen, und eilte in seine Wohnung. Zwei Personen kamen die Treppe herunter; ihm blieb nur Zeit, sich in eine Nische zu schleichen, um ihnen auszuweichen. Es war Mercedes, die sich auf den Arm ihres Sohnes stützte und das Haus verließ. Sie gingen dicht an dem unglücklichen Wesen vorbei, das hinter dem Damastvorhang verborgen fast spürte, wie Mercedes-Kleid an ihm vorbeistreifte, und den warmen Atem seines Sohnes, der diese Worte aussprach: „Mut, Mutter! Komm, das ist nicht mehr unser Zuhause!“ " Die Worte verklangen, die Schritte verloren sich in der Ferne. Der General richtete sich auf und klammerte sich an den Vorhang. Er stieß das schrecklichste Schluchzen aus, das jemals aus der Brust eines Vaters kam, der gleichzeitig von seiner Frau und seinem Sohn verlassen wurde. Bald hörte er das Klappern der eisernen Stufen der Mietkutsche, dann die Stimme des Kutschers und dann das Rollen des schweren Fahrzeugs, das die Fensterscheiben erschütterte. Er stürzte in sein Schlafzimmer, um noch einmal alles zu sehen, was er auf der Welt geliebt hatte; aber die Mietkutsche fuhr weiter und weder Mercedes noch ihr Sohn erschienen am Fenster, um einen letzten Blick auf das Haus oder den verlassenen Vater und Ehemann zu werfen. Und in dem Moment, als die Räder dieser Kutsche das Tor passierten, hörte man einen Knall, und dichter Rauch entwich durch eine der Scheiben des Fensters, das durch die Explosion zerbrochen war.
        Die Tür stand weit offen, eine Mietkutsche stand mitten im Hof ​​– ein seltsamer Anblick vor einem so edlen Herrenhaus; Der Graf sah es mit Entsetzen an, wagte aber nicht, nach der Bedeutung zu fragen, und eilte in seine Wohnung. Zwei Personen kamen die Treppe herunter; ihm blieb nur Zeit, sich in eine Nische zu schleichen, um ihnen auszuweichen. Es war Mercedes, die sich auf den Arm ihres Sohnes stützte und das Haus verließ. Sie gingen dicht an dem unglücklichen Wesen vorbei, das hinter dem Damastvorhang verborgen fast spürte, wie Mercedes-Kleid an ihm vorbeistreifte, und den warmen Atem seines Sohnes, der diese Worte aussprach: „Mut, Mutter! Komm, das ist nicht mehr unser Zuhause!“ " Die Worte verklangen, die Schritte verloren sich in der Ferne. Der General richtete sich auf und klammerte sich an den Vorhang. Er stieß das schrecklichste Schluchzen aus, das jemals aus der Brust eines Vaters kam, der gleichzeitig von seiner Frau und seinem Sohn verlassen wurde. Bald hörte er das Klappern der eisernen Stufen der Mietkutsche, dann die Stimme des Kutschers und dann das Rollen des schweren Fahrzeugs, das die Fensterscheiben erschütterte. Er stürzte in sein Schlafzimmer, um noch einmal alles zu sehen, was er auf der Welt geliebt hatte; aber die Mietkutsche fuhr weiter und weder Mercedes noch ihr Sohn erschienen am Fenster, um einen letzten Blick auf das Haus oder den verlassenen Vater und Ehemann zu werfen. Und in dem Moment, als die Räder dieser Kutsche das Tor passierten, hörte man einen Knall, und dichter Rauch entwich durch eine der Scheiben des Fensters, das durch die Explosion zerbrochen war.
   


HTML

CSS:

复制代码 代码如下:

a{ Textdekoration: keine; Farbe:#fff;}
#rbox{

    width:620px;
    Höhe:420px;
    Position:fest;
    oben:50%;
    links:50 %;
    Rand: -210px 0 0 -310px;
    Randradius:8px; /*圆角*/
    Hintergrundfarbe:#999;
    z-index:3;
    Anzeige:keine;   
}

.go{

    position:absolute;
    rechts: 10px;
    oben: 10px;
    Polsterung: 5px 12px;
    Hintergrund: rgba(0,0,0,.4);
    box-shadow: 0 0 0 2px rgba(255,255,255,.4);
    Farbe: #fff;
    Randradius: 26px;
}

#mask{

    Hintergrundfarbe:#000;
    Position:absolut;
    oben:0;
    links:0;
    display:none;
    z-index:2;
}

#register{ z-index:1; Farbe:blau;}
.content{ width:800px; Höhe:auto; margin:0 auto;}

JS:

复制代码 代码如下:

$(function(){
 
//Klicken Sie hier, um sich zu registrieren
$("#register").click(function(){
 
If(window.screen.availHeight > $(document.body).outerHeight(true)){
                             
//Wenn die Höhe des verfügbaren Arbeitsbereichs des Bildschirms > die Gesamthöhe des Dokumentkörpers des aktuellen Fensters des Browsers einschließlich des Randabstands (beim Zoomen) ist
               $("#mask").show().css({"opacity":"0.5","width":"100%","height":window.screen.availHeight});
         }sonst{
                             
$("#mask").show().css({"opacity":"0.5","width":"100%","height":$(document.body).outerHeight(true)});
                                                                                              $("#rbox").show();                                                         });

//Passen Sie die Breite und Höhe der Maske entsprechend den Änderungen im sichtbaren Fenster des Browsers an, sodass die Maske den Browser ausfüllt

$(window).resize(function(){                                
//Ändern Sie die Breite und Höhe der Maske entsprechend den Änderungen im Browserfenster, sodass die Maske den gesamten Browser ausfüllt
If($("#mask").css("width")!=0){

                                                                                                                                                                                                          $(" #mask").css(""width",""100%"); //Die Breite kann bei Bedarf auch beurteilt werden
if(window.screen.availHeight > $(document.body).outerHeight(true)){

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

               }sonst{

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

            }
}
});

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

});




Diese Funktion ist abgeschlossen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage