jsとcssはポップアップレイヤがページ全体を上書きする方法を実現する

この例では、jsとcssがポップアップレイヤを実装してページ全体を上書きする方法について説明します.皆さんの参考にしてください.具体的な実現方法は以下の通りである.
ポップアップ・レイヤの透明なバックグラウンド・ボックスの一般的なスタイルと構造は、次のとおりです.

   .alertMessageBg{ 
  
 position:fixed; 
  
 _position:absolute; 
  
 width:100%; 
  
 height:100%; 
  
 left:0; 
  
 top:0; 
  
 background:#000; 
  
 opacity:0.5; 
  
 -moz-opacity:0.5; 
  
 filter:alpha(opacity=50); 
  
 z-index:97; 
  
 display:none; 
  
 } 
  
 .alertMessageDivBorder{ 
  
 position:fixed; 
  
 _position:absolute; 
  
 width:750px; 
  
 height:370px; 
  
 left:50%; 
  
 top:50%; 
  
 margin:-185px 0 0 -375px; 
  
 background:#000; 
  
 filter:alpha(opacity=30); 
  
 -moz-opacity:0.3; 
  
 opacity:0.3; 
  
 z-index:98; 
  
 display:none; 
  
 } 
  
 .alertMessageDiv{ 
  
 position:fixed; 
  
 _position:absolute; 
  
 width:730px; 
  
 height:350px; 
  
 left:50%; 
  
 top:50%; 
  
 margin:-175px 0 0 -365px; 
  
 background:#fff; 
  
 z-index:99; 
  
 display:none; 
  
 font-size:14px; 
  
 } 
   
  

 

 
 
 

弹出层背景覆盖整个网页的方法

1.css方法

   .alertMessageBg{ 
  
 position:fixed; 
  
 _position:absolute; 
  
 width:100%; 
  
 height:100%; 
  
 left:0; 
  
 top:0; 
  
 background:#000; 
  
 opacity:0.5; 
  
 -moz-opacity:0.5; 
  
 filter:alpha(opacity=50); 
  
 z-index:97; 
  
 display:none; 
  
 } 
 

2.jsメソッド

   .alertMessageBg{ 
  
 position:absolute; 
  
 width:100%; 
  
 height:100%; 
  
 left:0; 
  
 top:0; 
  
 background:#000; 
  
 opacity:0.5; 
  
 -moz-opacity:0.5; 
  
 filter:alpha(opacity=50); 
  
 z-index:97; 
  
 display:none; 
  
 } 
   
  
var bgWidth = document.body.clientWidth + 'px',
 　　bgHeight = document.body.clientHeight + 'px',
 　　alertBgNode = $('.alertMessageBg');
 alertBgNode.css({'width':bgWidth,'height':bgHeight});
 
 

以上の2つの方法と比較すると,css法は特にie 6と互換性がない現在よりも手間が省けることが明らかになった.
本稿では,JSベースのウェブプログラミングについて述べたい.