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

crabdave · 发表于 2013-2-7 14:40:58

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

效果：

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" onclick='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' onclick='showMessages()'/></td>
     </tr>
  </table>
   </td>
</tr>
</table>
</BODY>
</HTML>

		自动登录	找回密码
密码			立即注册

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

浏览过的版块

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