CSS+JavaScript
実装の原則：
絶対的なポジショニングを使用してフルスクリーンDIVを作成し、他の要素に影響を与えることなくドキュメントストリームから分離し、半透明の状態に設定できます。もちろん、この透明性は自由に調整し、ログイン要素を作成することができます。これは、絶対的な位置を使用し、画面上のdivよりもz-index属性値を大きくするため、この時点でフルスクリーンDivでカバーされません。デフォルトの状態では、これら2つのDIVの表示属性値はありません。対応するボタンをクリックすると、表示属性値を変更できます。
<！doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "著者" content = "// www.vevb.com/"/> <title>フルスクリーングレーブラックのグレーブラック透過マスク効果effect-wulin.com </<スタイル= <スタイル= "> cs">パディング：0px; } .zhezhao {width：100％;高さ：100％;バックグラウンドカラー：＃000;フィルター：アルファ（不透明度= 50）; -moz-opacity：0.5;不透明度：0.5;位置：絶対;左：0px;上：0px;表示：なし; z-index：1000; } .login {width：280px;高さ：180px;位置：絶対;トップ：200px;左：50％;バックグラウンドカラー：＃000;マージン左：-140px;表示：なし; Z-Index：1500; } .content {margin-top：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歓迎、あなたを歓迎します。上記は、基本的なマスク関数を実装しています。 [マスクをポップアップする]をクリックすると、オブジェクトがポップアップします。クリックして閉じると、マスク効果が消えます。
純粋なJavaScript：
実装効果：ウィンドウがポップアップすると、ウィンドウの後ろのページが暗くなり、操作できません。
難易度：DivレイヤーはSelectコントロールをカバーできないため、2つの特別な方法があります。1つは、選択をカバーするためにポップアップウィンドウの下にiframeを追加することです。 2つ目は、ポップアップ時に選択コントロールを非表示にし、ここで2番目のメソッドを選択することです。
実装の原則：ページとポップアップウィンドウの中央に半透明のレイヤーを追加して、ページのコンテンツを上書きします。
コード：
<スクリプト言語= "javascript"> function open（）{// select control displayselect（0）; //マスクレイヤーdocument.getElementById（ "divpagemask"）。style.display= "block"; //マスクレイヤーResizemask（）をトレーニングします。 window.onresize = resizemask; //ポップアップdocument.getElementById（ "divopenwin"）。style.display= "block"; } function close（）{// [select control displayselect（1）;を表示します。 //マスクレイヤーdivpagemask.style.width = "0px"; divpagemask.style.height = "0px"; divopenwin.style.display = "none"; window.onresize = null; document.getElementById（ "divopenwin"）。style.display = "none"; } //ページマスク関数resizemask（）{divpagemask.style.width = document.body.scrollwidth; divpagemask.style.height = document.body.scrollheight; divopenwin.style.left =（（document.body.offsetwidth -divopenwin.offsetwidth） / 2）; divopenwin.style.top =（（document.body.offsetheight -divopenwin.offseetheight） / 2）; }関数displaySelect（val）{// select control var displaytypeを表示して非表示にします。 var arrdispalytype = ["hidden"、 "visible"]; var arrobjselect = document.getElementsByTagname（ "Select"）; for（i = 0; i <arrobjselect.length; i ++）{arrobjselect [i] .style.visibility = arrdispalytype [val]; }} </script> <style type = "text/css"> .body、td {font-size：12px} #divpagemask {background-color：white;フィルター：アルファ（不透明= 50）;左：0px; position：aspolute; top：0px;} #divopenwin {background-color：#eeeee; position：aspolute; left：0px; top：0px; display：none; z-index：50;幅：300px;高さ：150px} </style> <div id = "divpagemask"> </div> <div id = "divopenwin"> <center> <a href = "javascript：close（）;"> close </a> </center> </div> <ラベル> < <td colspan = "2" align = "center"> <p> <img src = "http://www.sopul.com/images/index/logo.gif"> </p> <p> </p> <p> </p> </td> </tr> <td style = "color：＃666666; font-size：13px"> </td> </tr> </tbody> </table> <table bgcolor = "＃e1e1e1" cellpadding = "0" "cellpacing =" 1 "> <tbody> <tr> <td align =" center "bgcolor = <table = <table < cellPadding = 0 width = 600 style = "margin-top：20px"> <form name = "f" action = "http://www.sopull.com/shoplist.asp"> <tbody> <ttr> <td>キーワード：</td> <td> <入力タイプ "" 'size = 30/> </td> width = 101>場所：</td> <td align =中幅= 97 id = "cn"> <スクリプト言語= "javascript" src = "http://www.sopull.com/inc/js/listcity.asp?cityname=beijing"> </td <inud = <td <td <td <td <infign = <inud = <td <infig value = "Search Shop"> </td> </tr> </form> <tr> <td> </td> <td colspan = "4" valign = "middle">たとえば：レストラン。アプライアンス;スーパーマーケット</table> </td> </tr> </tbody> </table> </table> </table> </table> </center> <p align = "center"> </p> <p align = "center"> <a href = "javascript：open（）;"> open mask </a> cellPadding = "0" cellpacing = "0"> <tbody> <！ - <tr> <td align = "center" background = "images/index/line_2.gif"> <img src = "images/index/line_2.gif"> </td> </tr> - > <td <td aLign = " color = "＃ff6600">ショッププロモーション</a> | <a href = "＃">ショップについて</a> | <a class = b href = "＃"ターゲット= _blank>ビジネス協力</a> | <onclick = "this.style.behavior = 'url（＃default＃homepage）'; the.setomepage（ 'http://www.sopull.com'）; return false;" href = "http://www.sopull.com/#">ホームページとして設定</a> | <onclick = "javascript：window.external.addfavorite（ 'http://www.sopull.com/','soupu.com-china's最大の店検索エンジン'） align = "center">©2007 SOOPU.com Guangdong ICP No. 07006767 </td> </tr> </tbody> </table>