次のようなコンテナがあるとします。
次のようにコードをコピーします。
<style type="text/css">
#コンテナ{幅:自動;高さ:自動;}
/*ここでの overflow:hidden; 属性は、主にコンテナ以降の部分を自動的に非表示にするためのものです。この属性を設定する理由は、IE8 以前のバージョンのブラウザの互換性の問題を解決するためです。
</スタイル>
<div id="コンテナ" >
</div>
次に、Web ページに div レイヤーをポップアップし、ポップアップ div レイヤーを閉じる前にコンテナーを操作できないようにします。
次に、最初にこのマスクの div レイヤーを次のように定義する必要があります。
次のようにコードをコピーします。
<div id="継続">
<!―マスクレイヤーをコンテナ内に入れるだけ
<divid=”shade” style=”width:1600px;height:900px;/*マスクレイヤーに初期サイズを与えます*/”>
<input name=”close” id=”close” value=”close”>
</div>
</div>
次に、js を使用してマスク レイヤーを常に画面に表示し、マスク レイヤーの下のコンテンツを操作できないようにします。閉じるボタンをクリックしてマスク レイヤーを閉じます。
次のようにコードをコピーします。
<script type="text/javascript">
$(関数(){
// 現在のブラウザの内部の幅と高さを取得します
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//マスクレイヤーの幅と高さを設定します
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//閉じるボタンを中央に表示するように設定
$("#close").css("margin-top",nHeight/2-50+"px");
//ブラウザのサイズが変更されたときにトリガーされるイベントを設定します
$(ウィンドウ).resize(function(){
// 現在のブラウザの内部の幅と高さを取得します
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//マスクレイヤーの幅と高さを設定します
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//閉じるボタンを中央に表示するように設定
$("#putPwd").css("マージントップ",nHeight/2-50+"px");
});
//閉じるボタンを設定してマスクレイヤーを削除します
$("#close").click(function(){
$("#shade").removeAttr("id");
$("#shade").html("");
});
// 純粋な JS で記述することもできます
Document.getElementById(“シェード”).style…….;
//後で言っても仕方がありませんが、興味はあるけど書き方が分からないという方は、ぜひご連絡ください。
})
</script>