當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS模拟模式窗口效果

發布時間：2025/3/15 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS模拟模式窗口效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<html>
<head>
??? <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
??? <title>JS模擬模式窗口效果</title>
</head>
<script>
??? var falpha = 0;
??? function fchange() {
??????? if (falpha != 90) {
??????????? table1.style.filter = "alpha(opacity=" + falpha + ")";
??????????? falpha = falpha + 10;
??????????? setTimeout("fchange()", 200)
??????? } else {
??????????? falpha = 0;
??????? }
??? }
??? function sss() {
??????? table1.style.height = (window.document.body.clientHeight > window.document.body.scrollHeight) ? window.document.body.clientHeight : window.document.body.scrollHeight;
??????? table1.style.width = "100%";
??????? table1.style.display = 'block';
??????? table2.style.left = window.document.body.scrollWidth / 2 - 100;
??????? table2.style.top = window.document.body.offsetHeight / 2 - 100;
??????? table2.style.display = 'block';
??????? fchange();
??? }

??? function freset() {
??????? table1.style.display = 'none'
??????? table2.style.display = 'none'
??? }

</script>
<body topmargin="0" leftmargin="0" bgcolor="yellow" style="display: block;">
??? 
??? <table id="table1" style="background: #FFFFFF; display: none; position: absolute;
??????? z-index: 1; filter: alpha(opacity=90)" οncοntextmenu="return false">
??????? <tr width="100%" height="100%">
??????????? <td>
??? </table>
??? <table οncοntextmenu="return false" id="table2" border="2" style="background: #E1E100;
??????? border-color: red; display: none; position: absolute; z-index: 2; width: 200;
??????? height: 100;" cellspacing="0" cellpadding="0" bordercolor="#800000">
??????? <tr width="150" height="20">
??????????? <td align="right" bordercolor="#E1E100">
??????????????? <input type="button" οnclick="freset()" value='確定'>
??????????? </td>
??????????? <td bordercolor="#E1E100">
??????????????? <input type="button" οnclick="freset()" value='取消'>
??????????? </td>
??????? </tr>
??? </table>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <br>
??? <p>
??????? <br>
??????? <br>
??????? <br>
??????? <br>
??????? <input type="button" οnclick="sss()" value='申請提交'>
??? </p>
</body>
</html>

總結

以上是生活随笔為你收集整理的JS模拟模式窗口效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。