div+css は単純なポップアップウィンドウを実装します (背景が灰色になります)_html/css

div+css は単純なポップアップウィンドウを実装します (背景が灰色になります)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:43:48

オリジナル

1864 人が閲覧しました

ウェブサイトを作成し、これまでやったことがなかったポップアップボックス機能を使用する必要があったので、オンラインで情報を確認し、最も簡単なポップアップボックスのエフェクトを作成してみました。
要件: ポップアップボックスボタンをクリックすると、元のページに基づいてポップアップボックスが表示されます。ポップアップボックスが閉じるまで、元のページは編集できません。
原則: 元のページに基づいて 2 つの div を追加します。1 つはポップアップボックス、もう 1 つはポップアップボックスの背後にある背景レイヤーです (ページが灰色になります)。まず、これら 2 つの div は元のページのコードとともに保存されますが、最初に CSS 属性の display: none を使用してこれらを非表示にし、ポップアップボックス効果がトリガーされると、display: block を使用してこれらを表示します。 2つのディビジョンが出てくるだけです。
完全なコードは次のとおりです:

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'><html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><title>div+css实现弹出层</title><style> #popBox{ position: absolute; display:none; width:300px; height:200px; left:40%; top:20%; z-index:11; background:#B8F764; } #popLayer{ position: absolute; display:none; width:100%; height:100%; left:0; top:0; z-index:10; background:#DCDBDC; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */ } </style><script type="text/javascript"> function popBox(){ var popBox = document.getElementById('popBox'); var popLayer = document.getElementById('popLayer'); popLayer.style.display = "block"; popBox.style.display = "block"; }//end func popBox() function closeBox(){ var popBox = document.getElementById('popBox'); var popLayer = document.getElementById('popLayer'); popLayer.style.display = "none"; popBox.style.display = "none"; }//end func closeBox() </script></head><body><input type="button" name="popBox" value="弹出框" onclick="popBox()" /><div id="popLayer" >    背景层  </div><div id="popBox" >    <div><a href="javascript:void(0)" onclick="closeBox()">关闭</a></div>    <div>弹出框</div></div></body></html>

ログイン後にコピー

レンダリングは次のとおりです:
元のページ:

ポップアップボックス:

その他の注意点: 1. 2 つのポップアップレイヤーの上部と下部の位置; 2. ポップアップ背景レイヤーの透明度の設定
まず、両方の div で、position:Absolute 属性を使用して、レイヤーの上位と下位を設定する必要があります。値が大きいほど、表示されます。
次に、背景の透明度には、次のような特定のコードを使用する必要があります。
opacity: 0.8;
filter: alpha(opacity= 80);/* IE6、7、8、9 のみをサポート */