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>