この記事では、JS+CSSによるフルスクリーングレーブラック透明マスク効果をポップアップする方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
多くのウェブサイトにそのような影響があります。特定の操作を実行した後、グレーブラック半透明のマスクがポップアップします。指定されたコンテンツは、ログインボックスやその他のコンテンツなど、操作できます。この効果を実現する方法を紹介しましょう。コードの例は次のとおりです。
次のようにコードをコピーします：<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Meta name = "Author" content = "// www.vevb.com/"/>
<Title>フルスクリーンのグレーブラック透明マスク効果をポップアップする方法-Wulin.com </title>
<style type = "text/css">
*
{
マージン：0px;
パディング：0px;
}
.Zhezhao
{
幅：100％;
高さ：100％;
バックグラウンドカラー：＃000;
フィルター：アルファ（不透明度= 50）;
-moz-opacity：0.5;
不透明度：0.5;
位置：絶対;
左：0px;
上：0px;
表示：なし;
z-index：1000;
}
。ログイン
{
幅：280px;
高さ：180px;
位置：絶対;
トップ：200px;
左：50％;
バックグラウンドカラー：＃000;
マージン左：-140px;
表示：なし;
Z-Index：1500;
}
。コンテンツ
{
マージントップ：50px;
色：赤;
ラインハイト：200px;
高さ：200px;
テキストアライグ：センター;
}
</style>
<script type = "text/javascript">
window.onload = function（）
{
var zhezhao = document.getElementById（ "Zhezhao"）;
var login = document.getElementById（ "Login"）;
var bt = document.getElementById（ "bt"）;
var btclose = document.getElementById（ "btclose"）;
bt.onclick = function（）
{
Zhezhao.style.display = "block";
login.style.display = "block";
}
btclose.onclick = function（）
{
zhezhao.style.display = "none";
login.style.display = "none";
}
}
</script>
</head>
<body>
<div id = "zhezhao"> </div>
<div id = "login"> <button id = "btclose">クリックして閉じる</button> </div>
<div> wulin.comはあなたを歓迎します、<ボタンid = "bt">クリックしてマスクをポップアップします</button> </div>
</body>
</html>
上記は、基本的なマスク関数を実装しています。 [マスクをポップアップする]をクリックすると、オブジェクトがポップアップします。クリックして閉じると、マスク効果が消えます。効果を達成する方法は次のとおりです。
実装の原則：
絶対的なポジショニングを使用してフルスクリーンDIVを作成し、他の要素に影響を与えることなくドキュメントストリームから分離し、半透明の状態に設定できます。もちろん、この透明性は自由に調整し、ログイン要素を作成することができます。これは、絶対的な位置を使用し、画面上のdivよりもz-index属性値を大きくするため、この時点でフルスクリーンDivでカバーされません。デフォルトの状態では、これら2つのDIVの表示属性値はありません。対応するボタンをクリックすると、表示属性値を変更できます。
提案：手書きのコードは、学習の効率と深さを効果的に改善することができます。
この記事がすべての人のWebプログラミングに役立つことを願っています。