欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

js实现的简单模态对话框

发布时间：2025/3/15 编程问答 52 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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实现的简单模态对话框的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。