页面弹出提示框,背景元素不可操作 示例
效果:
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>