ホームページ > 記事 > ウェブフロントエンド > [フロントエンド]-フルスクリーンマスク_html/css_WEB-ITnose
[フロントエンド]-フルスクリーンマスク_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:18:251154ブラウズ
フロントエンド開発では、多くの場合、ポップアップ レイヤーの表示にマスク レイヤーの表示が伴います。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>全屏遮罩</title> 8 </head> 9 10 <body>11 <style>12 .float-bg {13 width: 100%;14 height: 100%;15 background-color: #000;16 opacity: .6;17 filter: alpha(opacity=60);18 position: absolute;19 left: 0;20 top: 0;21 z-index: 1100;22 }23 </style>24 <div class="float-bg" id="float-bg"> </div>25 </body>26 </html> 上記のコードは、マスク レイヤーの簡単なデモ コードです。
ページにスクロールバーがない場合でも要件を満たすことができます。ただし、ページにスクロール バーがある場合、上記の処理方法では全画面マスクを満足できないことがわかります。
以下は、ページにスクロール バーが含まれている場合に全画面マスクを実現するための JavaScript の組み合わせです。
ここでは、前の記事の 2 つのメソッド、scrollWidth、scrollHeight を使用します。関連する処理方法は次のとおりです。
1 var floatBg = document.getElementById("float-bg");2 floatBg.style.width= document.body.scrollWidth + "px";<br /> floatBg.style.height = document.body.scrollHeight + "px"; このようにして、ページにスクロール バーが含まれているかどうかに関係なく、全画面マスクを実現できます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。