施用DIV半透明效果来禁用页面所有功能 _Web前端

使用DIV半透明效果来禁用页面所有功能

方案一．

? <body>
? <div id="BodyMask" ????
??style="display:none; filter:alpha(opacity=70); BACKGROUND: #CCCCCC; HEIGHT:100%; WIDTH:100%; left: 0px; position: absolute; top: 0px; " >
? </div>

? <div id="SubmitMSG" ????
??style="display:none;BORDER-RIGHT: #d5a338 1px solid; PADDING-RIGHT: 9px; BORDER-TOP: #d5a338 1px solid; PADDING-LEFT: 9px;BACKGROUND: #ffffdb; LEFT: 25%; PADDING-BOTTOM: 5px; BORDER-LEFT: #d5a338 1px solid; WIDTH:50%; COLOR: #000000; LINE-HEIGHT: 17px; PADDING-TOP: 6px; BORDER-BOTTOM: #d5a338 1px solid; POSITION: absolute; TOP:20%; TEXT-ALIGN: left " >
??正在查询数据，请梢等......<br/>
? </div>

??? <table>
??? ?<tr>
??? ??<td></td>
??? ?</tr>
??? </table>
??? <table border="0" align="center" cellpadding="2" cellspacing="2">
????? <tr>
??????? <td width="310"> </td>
??????? <td width="237"> </td>
??????? <td width="240"> </td>
????? </tr>????

?? <tr>
??????? <td colspan="3" align="center" >
???<form name="statisfrm" method="post" action="test.jsp?act=post">
????????????? <table width="30%"? border="0" cellspacing="1" cellpadding="0">???????????????
????<tr class="manageHead">
????????????????? <td? colspan="2" align="center">
?????<input type="button" name="queryTheme" value="submit" onclick="javascript:getDeptResultStatis()" />???????
????? </td>
??????????????? </tr>?????
???? </table>
???</form>
??</td>
????? </tr>
?? <tr>
??????? <td> </td>
??????? <td> </td>
??????? <td> </td>
????? </tr>
? </table>
? </body>

? <script language="javascript">
?function getDeptResultStatis()
?{???
??document.getElementById("BodyMask").style.display="";//显示
??document.getElementById("SubmitMSG").style.display="";//显示
??//document.statisfrm.submit();??
?}
??? ?
</script>

</html>

方案二．

如何想禁用页面所有功能，不能用户点击可以使用DIV的半透明效果来实现，非常方便，界面效果也不错。思路是用户点击按钮，调用一个javascript方法，显示预先在页面中定义好的隐藏div，返回结果后再隐藏div，允许用户继续操作。下面看实现的方法： <html><head>??? <title>半透明div</title>

如何想禁用页面所有功能，不能用户点击可以使用DIV的半透明效果来实现，非常方便，界面效果也不错。思路是用户点击按钮，调用一个javascript方法，显示预先在页面中定义好的隐藏div，返回结果后再隐藏div，允许用户继续操作。
下面看实现的方法：

<html>
<head>
??? <title>半透明div</title>
?? <style>
.#mask {
visibility: hidden;
background-color: #cccccc;
left: 0px;
position: absolute;
top: 0px;
background-image: none;
filter: alpha(opacity :?? 50);
}

.#dialog {
visibility: hidden;
background-color: #f7fcfe;
z-index: 100;
width: 300px;
height: 50px;
position: absolute;
text-align: center;
font-size: 30px;
color: #FF0000;
font-weight: bold;
vertical-align: middle;
}
</style>

<script language="javaScript">
function show()
{
??? var d_mask=document.getElementById('mask');
??? var d_dialog = document.getElementById('dialog');

??? d_mask.style.width = document.body.clientWidth ;
??? d_mask.style.height=document.body.clientHeight;

??? //网页正文全文
??? //d_mask.style.width = document.body.scrollWidth ;
??? //d_mask.style.height=document.body.scrollHeight;

??? d_dialog.style.top = document.body.clientHeight / 2 - 60;
??? d_dialog.style.left =document.body.clientWidth / 2 -100;

??? d_mask.style.visibility='visible';
??? d_dialog.style.visibility='visible';

}

function divBlock_event_mousedown()
{
var e, obj, temp;
obj=document.getElementById('dialog');
e=window.event?window.event:e;
obj.startX=e.clientX-obj.offsetLeft;
obj.startY=e.clientY-obj.offsetTop;
document.onmousemove=document_event_mousemove;
temp=document.attachEvent?document.attachEvent('onmouseup',document_event_mouseup):document.addEventListener('mouseup',document_event_mouseup,'');
}

function document_event_mousemove(e)
{
var e, obj;
obj=document.getElementById('dialog');
e=window.event?window.event:e;
with(obj.style){
??? position='absolute';
??? left=e.clientX-obj.startX+'px';
??? top=e.clientY-obj.startY+'px';
??? }
}

function document_event_mouseup(e)
{
var temp;
document.onmousemove='';
temp=document.detachEvent?document.detachEvent('onmouseup',document_event_mouseup):document.removeEventListener('mouseup',document_event_mouseup,'');
}

window.onresize = function()
{
??? var d_mask=document.getElementById('mask');
??? var d_dialog = document.getElementById('dialog');

??? d_mask.style.width = document.body.clientWidth ;
??? d_mask.style.height=document.body.clientHeight;
}
</script>
</head>
<div id ="mask"></div>
<div id ="dialog" onmousedown="divBlock_event_mousedown()">处理中，请等待……</div>
<body>
??? <table border='0' width="100%" height="100%">
??????? <tr>
??????????? <td>
??????????????? 测试
??????????? </td>
??????? </tr>
??????? <tr>
?????????? <td>
????????????? <input type="button" value="显示div" onclick="show()" />
?????????? </td>
??????? </tr>
??? </table>
</body>
</html>