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

最新推荐文章于 2023-11-30 13:40:47 发布

crabdave

最新推荐文章于 2023-11-30 13:40:47 发布

阅读量547

点赞数

分类专栏： Web 文章标签： HTML

本文链接：https://blog.csdn.net/crabdave/article/details/83355283

版权

Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

效果：

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>

</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>

<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>