读书人

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

发布时间: 2012-10-25 10:58:57 作者: rapoo

使用DIV半透明效果来禁用页面所有功能
使用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 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>
<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>

读书人网 >Web前端

热点推荐