以前の「ヘビ」を理解した後、この機能は最初に想像していたよりもはるかに難しくないと言えます。もちろん、この方法はトリッキーであると疑われており、最終的に機能が実装されています。分析して整理しましょう。
1。実装原則
この記事の実装の原則は次のとおりです。
*実際、ポップアップレイヤー、マスクレイヤー、元のページディスプレイは、それぞれ3つの異なるDIVです
*ポップアップ層のレベルはマスク層の上にあり、マスク層のレベルは元のページディスプレイの上にあります。
*マスク層には明確な効果があります
*マスク層には実用的な意味がないため、HTMLパートに記述する必要はありません。もちろん、書いた後にも実現することもできます。
2。コード実装
HTML言語は次のとおりです。
コードコピーは次のとおりです。
<html>
...
<body>
<center>
<div> <入力型= "ボタン" value = "go" onclick = "show（）"> </div>
<div id = "alert" style = "display：none;">
<form>
ログイン
<input type = "text"> <input type = "password"> <入力タイプ= "submit" value = "login">
</form>
</div>
</center>
</body>
</html>
JavaScriptはポップアップ層とマスクレイヤーを実装します。
コードコピーは次のとおりです。
<span style = "font-size：12px;"> function show（）{
var alertPart = document.getElementById（ "alert"）;
alertpart.style.display = "block";
alertpart.style.position = "absolute";
alertpart.style.top = "50％";
alertpart.style.left = "50％";
alertpart.style.margintop = "-75px";
alertPart.style.marginLeft = "-150px";
alertpart.style.background = "cyan";
alertpart.style.width = "300px";
alertpart.style.height = "200px";
alertpart.style.zindex = "501";
var mybg = document.createelement（ "div"）;
mybg.setattribute（ "id"、 "mybg"）;
mybg.style.background = "＃000";
mybg.style.width = "100％";
mybg.style.height = "100％";
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zindex = "500";
mybg.style.opacity = "0.3";
mybg.style.filter = "alpha（ofacity = 30）";
document.body.appendChild（mybg）;
document.body.style.overflow = "hidden";
}
</script> </span>
ここでは、Z-Indexを使用して、階層、不透明度、フィルターを区別します。Alpha（Opacity =）Transparency、Document.CreateElement（ "div"）およびdocument.body.appendChild（）、これらはすべて以前に使用されているため、それらを達成できます。実際、原則が理解されると、すべてがはるかに簡単になります。
道は長くて骨の折れる