页面弹出提示框,背景元素不可操作 示例

效果:


HTML源码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>弹出提示框,背景元素不可操作!</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
 #messages{ 
 position:absolute; 
 left:expression((body.clientWidth-180)/2); 
 top:expression((body.clientHeight-100)/2);
 width:180px; 
 height:100px;
 z-index:2;
 background:white;
 visibility:hidden
 } #content{ 
 position:absolute; 
 top:0; 
 left:0;
 width:expression(body.scrollWidth); 
 height:expression(body.scrollHeight); 
 background:#666;
 filter:ALPHA(opacity=60); 
 z-index:1; 
 visibility:hidden
 }
  </style>  <script>
   function showMessages(){
  document.getElementById("messages").style.visibility='visible';
  document.getElementById("content").style.visibility='visible';
   }
   function exitsMessages(){
  document.getElementById("messages").style.visibility='hidden';
  document.getElementById("content").style.visibility='hidden';
   }
  </script> </HEAD>
 <BODY>
  <div id="messages">          
   <table width='100%' height='100%'>
       <tr style='background:#036;height:10'>
      <td nobr>
        <div style="display:inline; width:150px; position:absolute"> <font size='2' color='red' align='left'> Attention!</font></div>
     <span style="float:right; display:inline; cursor:hand;color:white"  οnclick='exitsMessages();'>×</span>
     
      </td>
    </tr>
    <tr>
      <td align='left'>
       <ul style='font-size:12'>
     <li>
      Attentions 1 
     </li>
     <li>
      Attentions 2 
     </li>
       </ul>
      </td>
    </tr>
   </table>
  </div> <div id="content"></div>
 <table width='100%' height='100%'>
  <tr>
   <td valign='middle' align='center'><!--实现水平、垂直居中对齐-->
  <table>
     <tr>
       <td align='right'>Login Name:</td>
    <td><input type='text' value='' size='20'/></td>
     </tr>
     <tr>
       <td align='right'>E-mail:</td>
    <td><input type='text' value='' size='20'/></td>
     </tr>
     <tr>
       <td align='right'>Password:</td>
    <td><input type='password' value='' size='20'/></td>
     </tr>
     <tr>
       <td align='right'>Confirm Password:</td>
    <td><input type='password' value='' size='20'/></td>
     </tr>
     <tr>
       <td colspan='2' align='center'><input type='button' value='Submit' οnclick='showMessages()'/></td>
     </tr>
  </table>
   </td>
  </tr>
 </table> </BODY>
</HTML>