ブラウザウィンドウにマスクレイヤーを追加する方法_基礎知識

ブラウザ ウィンドウにマスク レイヤーを追加する方法

背景
Web2.0 では、ページ ポップアップは非常に一般的なインタラクション方法であり、不必要なページ ジャンプを回避できます。インターフェースのレイアウトと対話性を改善します。
しかし、ブラウザのネイティブ ポップアップ機能 (アラート、確認、プロンプト) には大きな制限があります。これは主に表示 UI が美しくなく、十分な柔軟性がないためです。そのため、多くの場合、ポップアップ機能を定義する必要があります。
モーダル ポップアップ ウィンドウ (モーダル ポップアップ ウィンドウとは、ポップアップ ウィンドウが表示されるときにページの他の部分をクリックできないことを意味します) を実装したい場合、通常のアプローチは div を使用してブロックします。ページウィンドウ全体。
実装
以下では、よりシンプルで効果的なマスク レイヤーを段階的に実装します。

ステップ 1:
最初に検討することブラウザ ウィンドウをブロックする div を定義するには、次の HTML CSS コードを検討してください:

ブラウザをブロックする可能性があります
1) 背景:#000: div の背景色を黒に設定します; filter:alpha(opacity=10): IE では、div を設定します。 div の透明度は 0.1 に設定されます; opacity:.1: 非 IE では、div の透明度を 0.1 に設定します
上記の 3 つの属性を組み合わせて、残りの部分の「遮られているが表示される」効果を実現します。ページ要素。
2)left:0px;top:0px;position:fixed;height:100%;width:100%: div の高さと幅をそれぞれブラウザーの高さと幅の 100% に定義します。ここにちょっとしたトリックがあります。div の位置が固定または絶対である場合、div の高さをパーセント (たとえば 100%) に設定すると、div の高さは高さを参照して計算されます。ブラウザのビューポートの。さらに、位置を固定に設定すると、ブラウザーがスクロールまたはサイズ変更している場合でも、マスク レイヤーがページの表示領域を常にブロックすることができます。
3)overflow:hidden は、スクロール バーの表示を避けるために使用されます。

ステップ 2:
注意深い読者であれば、上記の CSS コードが IE 6 に適用されないことがわかるはずです。理由は 2 つあります。 まず、IE6 は位置をサポートしていません。第二に、そしてより重要なことに、IE 6 では height:100% が機能せず、div の高さがブラウザの表示領域の高さを参照しなくなります。
最初の欠陥を修正するのは簡単です。CSS ハックを使用して _position:absolute を追加するだけです。
2 番目の欠陥を修正するには、JavaScript を使用してマスク レイヤーの高さと幅を動的に計算する必要があります。特別な注意は、ページがスクロールされたときにマスク レイヤーがウィンドウもカバーするようにするためです。マスクレイヤーの幅はスクロール領域をカバーする必要があります。
動的計算のコードは次のとおりです。マスク変数はマスク レイヤーを指します。

コードをコピーしますコードは次のとおりです。

function CalculateSize() {
var b = document.documentElement.clientHeight ? document.documentElement : document.body,
height = b.scrollHeight > .clientHeight ? b.scrollHeight : b. clientHeight、
width = b.scrollWidth : b.clientWidth :
mask.css({高さ:高さ、幅:幅}) ;
}

さらに、ページ サイズが変更されると、マスク レイヤーの高さと幅を再計算する必要があることに注意することも重要です。そうしないと、新しく拡張された領域が正しく表示されない可能性があります。マスクされた。

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

function raise() {
calculateSize ();
$(window).on(“resize”, CalculateSize);

ステップ 3: ステップ 1 とステップ2、マスクレイヤーの構築は基本的に完了です。ただし、IE6 では、いくつかの特別な状況を考慮する必要があります。ページ上に選択要素がある場合、マスク レイヤーはその選択要素をカバーできません。これは IE 6 の有名なバグです。解決策は、「iframe をマスク レイヤーに追加する」にあります。
HTML CSS コードは次のとおりです:

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

少し説明が必要なヒントがいくつかあります:
1) iframe のスタイルは width:100%;height:100%; を使用しますが、これは親が配置されているため実現可能です。要素の高さと幅が決定されています
2) マスクレイヤー内で、iframe に加えて div が追加されます。div と iframe の位置は絶対であり、div の z-index は大きくなります。このようにして、内部 div が iframe をブロックします。これには実用的な意味があります。ページ上の一部のイベント (onclick、onmouseup、onmousemove など) は、iframe によってインターセプトされるのではなく、引き続きこのページ上で応答されます。
コード例
上記の分析に基づいて、全体的な実装コードは次のとおりです。参照してください:

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

var windowMask = (function($) {

var isIE6 = $.browser.msie && $.browser.version == "6.0";
var マスク = '

';

isIE6 && (マスク = '< ;div unselectable="on" style="display:none;background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;_position:absolute;height :100%;幅:100 %;オーバーフロー:非表示;z-index:10000;">

');

mask = $(mask);
$("body" ).append(マスク);

関数 show() {
isIE6 && マスク.show();

関数 Hide() {
isIE6 && $ (window).off("resize", CalculateSize);

function CalculateSize(); document.documentElement.clientHeight ? document.body,
height = b.scrollHeight > b.scrollHeight : b.clientHeight,
width = b.scrollWidth > b.scrollWidth : b.clientWidth ;

mask.css({高さ: 高さ, 幅: 幅})
}

関数 サイズ変更() {
calculateSize() ;
$(window ).on("resize", CalculateSize);

return {
表示: 表示,
非表示: 非表示
}; >})();


マスク レイヤーを表示する必要がある場合は、windowMask.show() を呼び出します。マスク レイヤーを削除する場合は、windowMask を呼び出します。隠れる（）。