ホームページ >ウェブフロントエンド >jsチュートリアル >主流のブラウザと互換性のある jQuery CSS を使用してマスク レイヤーを実装する簡単なコード_jquery

主流のブラウザと互換性のある jQuery CSS を使用してマスク レイヤーを実装する簡単なコード_jquery

WBOY
WBOYオリジナル
2016-05-16 16:34:181217ブラウズ

ページ上で「登録」をクリックすると、不透明な黒いマスクのレイヤーが表示されます。この時点では、ページ上の登録ボックス以外の要素はクリックできません。登録ボックスに「ちょっと散歩してください」と書くとマスクが消えます。

プレビューアドレス:

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

キーポイント:

1. マウス ホイールでページを上下にスクロールしたり、ページをズームしたり、ブラウザ ウィンドウのサイズを変更したりする場合を含め、登録ボックスは常に水平方向と垂直方向の中央に配置されます

登録ボックスの幅と高さは主に CSS によって決定されます (620*420px)。まず、position:fixed を使用してブラウザ ウィンドウを基準にして絶対位置を指定し、次に垂直方向の中央に配置します。 %; 左:50%; マージン:-210px 0 0 -310px;

2. ページをズームしたりブラウザ ウィンドウのサイズを変更したりする場合、マスク レイヤーは常にドキュメント全体をカバーし、ブラウザに表示されているウィンドウ全体と、閲覧するためにスクロールする必要がある部分を埋める必要があります。 Chrome や IE などのさまざまなカーネル ブラウザ。

2 つの重要なプロパティ: js の window.screen.availHeight と jQuery の $(document.body).outerHeight(true)。 window.screen.availHeight は画面の利用可能な作業領域の高さを指し、$(document.body).outerHeight(true) はブラウザの現在のウィンドウのドキュメント本文の合計幅を指します。境界線のパディングマージン。 window.screen.availHeight は主に IE (11) で使用され、ページを拡大縮小した後もマスク レイヤーがブラウザ ウィンドウを確実に埋めることができます。

3. マスクレイヤーが表示されてもページを上下にスクロールできますが、ログインボックスを除くページ上の他の要素は操作できません

コード:

HTML (十分なレベルのドキュメントをテストする必要があります):

コードをコピー コードは次のとおりです:


   
   

   
   
   
       

           
                注册
           

       

        自殺。
        一方、モンテ・クリストもエマヌエルとマクシミリアンとともに町に戻っていた。彼らの帰りは陽気だった。エマニュエルは事件が平和裏に終わったことに喜びを隠さず、声高に喜びの表情を浮かべた。モレルは馬車の片隅で義理の弟の陽気な気持ちを言葉に費やしながら、内心では同じ喜びを感じていたが、それが表れたのは彼の顔だけだった。バリエール・デュ・トロンで彼らは、持ち場で見張りとして身動きもせずにそこで待っていたベルトゥッチョに出会った。モンテ・クリストは窓から顔を出し、低い声で二、三言葉を交わすと、執事は姿を消した。ロワイヤル広場の端まで来たとき、エマニュエルは言った。「私を玄関の前に降ろしてください。私のことやあなたのことで、妻が一瞬たりとも無用な不安を感じないように。」
        「私たちの勝利を誇示するのがばかばかしいことではないなら、私は伯爵を家に招待するでしょう。それに、彼は間違いなく慰めたいと震えている心を持っているでしょう。それで、私たちは友人に別れを告げて、彼を急いで家に帰らせます。」 」
        「ちょっと止まって」モンテ・クリストは言った。 「私を二人とも失わせないでください。エマニュエル、あなたの魅力的な妻のところに戻って、彼女に最高の賛辞を贈ってください。そしてモレル、私と一緒にシャンゼリゼまで行ってくれませんか。」
        「喜んで」マクシミリアンは言った。 「特にその四半期には用事があるので。」
        「朝食をお待ちしましょうか?」エマニュエルは尋ねた。
        「いいえ」と若い男は答えた。扉が閉まり、馬車は進んでいった。 「私があなたにどれほどの幸運をもたらしたか見てください!」伯爵と二人きりになったとき、モレルは言った。そう思ったことはありませんか?
        「そうです」とモンテ・クリストは言いました。 「だから、私はあなたを近くに置いておきたかったのです。」
        「奇跡だよ!」モレルは続けて、自分の考えに答えた。
        "何?"モンテ・クリストは言った。
        「今何が起こったのですか?」
        「そうですよ」と伯爵は言いました、「その通りです、それは奇跡です。」
        「アルバートは勇敢だからね」とモレルが続けた。
        「とても勇敢だ」とモンテ・クリストは言った。 「彼が剣を頭上に下げて眠っているのを見たことがあります。」

「彼女は家を出るつもりです」とスチュワードは言いました。
        「そして彼女の息子は?」
        「彼の従者であるフロレンティンは、自分も同じことをするだろうと考えている。」
        「こっちに来てください。」モンテ・クリストはベルトゥッチョを書斎に連れて行き、私たちが見たような手紙を書き、家令に渡しました。 「行きなさい」彼は急いで言った。 「でもその前に、私が戻ってきたことをハイディーに知らせてください。」
        「ここにいるよ」馬車の音を聞いて階下に駆け下りた少女はそう言った。伯爵が無事に戻ってきたのを見て、その顔は喜びで輝いていた。ベルトゥッチョは去った。娘が父親を見つけるあらゆる感​​動、愛人が愛する恋人に会った喜びのすべてを、彼女が熱心に期待していたこの出会いの最初の瞬間にハイディーは感じた。疑いもなく、それほど明白ではありませんが、モンテ・クリストの喜びはそれほど強烈ではありませんでした。長く苦しんできた人の喜びは、長い干ばつの後に地面に落ちる露のようなものです。心も地面も、降り注ぐ有益な湿気を吸収しており、外見上は何も見えません。
        モンテ・クリストは、長い間信じられなかったが、世界にはメルセデスが 2 台あり、自分はまだ幸せかもしれない、と考え始めていた。彼の目は幸せに高揚し、涙を流すハイディーの視線を熱心に読んでいたが、突然ドアが開いた。伯爵は眉をひそめた。 「ド・モルセルフさん!」バプチスティンは、あたかもその名前だけで十分であるかのように言った。実際、伯爵の顔は明るくなった。
        「子爵と伯爵はどちらですか?」と彼は尋ねた。
        「カウントです。」
        「ああ、まだ終わってないの?」とハイディーが叫んだ。
        「終わったかどうかは分からない、私の愛する子よ」モンテ・クリストは少女の手を取って言った。 「でも、あなたがこれ以上恐れることは何もないことはわかっています。」
        「しかし、それは悲惨なことです」 --
        「あの男は私を傷つけることはできません、ハイディー」とモンテ・クリストは言いました。 「恐れる理由があったのは彼の息子だけだった。」
        「それで、私がどんな目に遭ってきたか」と少女は言いました、「主よ、あなたには決して分からないでしょう。」モンテ・クリストは微笑んだ。 「父の墓のそばで」と彼は少女の頭の上に手を差し伸べながら言った、「ハイディー、君に誓う、もしどんな不幸が起こっても、それは私には関係ないよ。」
        ドアは大きく開いていて、馬車が庭の真ん中に立っていました。これほど高貴な邸宅を前にした奇妙な光景でした。伯爵はそれを恐怖の目で見ましたが、その意味をあえて尋ねることもなく、急いで自分のアパートに向かいました。二人の人が階段を降りてきました。彼には彼らを避けるために床の間に忍び込むだけの時間がありました。メルセデスは息子の腕に寄りかかり、家を出て行った。彼らは、ダマスク織のカーテンの後ろに隠れた不幸な人物の近くを通り過ぎた。彼は、メルセデスのドレスが彼の前を通り過ぎていくのをほとんど感じたし、息子の温かい息遣いがこう言った。 」言葉は消え、足取りは遠くに消えた。将軍はカーテンにしがみついて体を起こした。彼は、妻と息子に同時に捨てられた父親の胸から、これまでにないほど恐ろしい泣き声を上げた。間もなく、馬車の鉄のステップがガタガタする音が聞こえ、次に御者の声が聞こえ、そして大型車両の横揺れが窓を揺るがした。彼は自分がこの世で愛したすべてのものをもう一度見るために寝室へと急ぎました。しかし、馬車は走り続けたが、メルセデスの頭も息子も、家や捨てられた父親と夫を最後に見ようと窓に現れなかった。そして、その馬車の車輪が門を横切ったまさにその瞬間に通報があり、爆発で割れた窓ガラスの一枚から濃い煙が漏れ出しました。
        ドアは大きく開いていて、馬車が庭の真ん中に立っていました。これほど高貴な邸宅を前にした奇妙な光景でした。伯爵はそれを恐怖の目で見ましたが、その意味をあえて尋ねることもなく、急いで自分のアパートに向かいました。二人の人が階段を降りてきました。彼には彼らを避けるために床の間に忍び込むだけの時間がありました。メルセデスは息子の腕に寄りかかり、家を出て行った。彼らは、ダマスク織のカーテンの後ろに隠れた不幸な人物の近くを通り過ぎた。彼は、メルセデスのドレスが彼の前を通り過ぎていくのをほとんど感じたし、息子の温かい息遣いがこう言った。 」言葉は消え、足取りは遠くに消えた。将軍はカーテンにしがみついて体を起こした。彼は、妻と息子に同時に捨てられた父親の胸から、これまでにないほど恐ろしい泣き声を上げた。間もなく、馬車の鉄のステップがガタガタする音が聞こえ、次に御者の声が聞こえ、そして大型車両の横揺れが窓を揺るがした。彼は自分がこの世で愛したすべてのものをもう一度見るために寝室へと急ぎました。しかし、馬車は走り続けたが、メルセデスの頭も息子も、家や捨てられた父親と夫を最後に見ようと窓に現れなかった。そして、その馬車の車輪が門を横切ったまさにその瞬間に通報があり、爆発で割れた窓ガラスの一枚から濃い煙が漏れ出しました。
   


HTML

CSS:

复制代 代码如下:

a{ テキスト装飾: なし;色:#fff;}
#rbox{

幅:620px;
    高さ:420ピクセル;
    位置:固定;
    トップ:50%;
    左:50%;
    マージン:-210px 0 0 -310px;
    境界半径:8px; /*圆角*/
    背景色:#999;
    z-index:3;
    ディスプレイ:なし;   
}

.go{

位置:絶対;
    右: 10px;
    上: 10px;
    パディング: 5px 12px;
    背景: rgba(0,0,0,.4);
    box-shadow: 0 0 0 2px rgba(255,255,255,.4);
    色: #fff;
    境界半径: 26px;
}

#マスク{

背景色:#000;
    位置:絶対;
    トップ:0;
    左:0;
    表示:なし;
    z-index:2;
}

#register{ z-index:1;色:青;}
.content{幅:800ピクセル;高さ:自動;マージン:0 自動;}

JS:

复制代码代码如下:

$(関数(){

//クリックして登録
$("#register").click(function(){

If(window.screen.availHeight > $(document.body).outerHeight(true)){

// 画面の利用可能な作業領域の高さ > 境界埋め込みマージンを含むブラウザの現在のウィンドウのドキュメント本文の高さの合計の場合 (ズーム時)
$("#mask").show().css({"opacity":"0.5","width":"100%","height":window.screen.availHeight});
}その他{

$("#mask").show().css({"不透明度":"0.5","幅":"100%","高さ":$(document.body).outerHeight(true)});
                                                                                         $("#rbox").show(); });

// ブラウザの表示ウィンドウの変化に応じてマスクの幅と高さを調整し、マスクがブラウザを満たすようにします

$(window).resize(function(){
//ブラウザウィンドウの変化に応じてマスクの幅と高さを変更し、マスクがブラウザ全体を埋めるようにします
If($("#mask").css("width")!=0){

$("#mask ").css(""width",""100%"); //必要に応じて幅も判定可能
if(window.screen.availHeight > $(document.body).outerHeight(true)){

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

}その他{

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

}
}
});

$(".go").click(function(){

$("#mask").hide();
$("#rbox").hide();
});

});




この機能は完了しました。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。