您的位置：首页 > Web前端 > JavaScript

JS模拟模式窗口效果

2011-09-03 14:37 453 查看
 
<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)" oncontextmenu="return false">

        <tr width="100%" height="100%">

            <td>

    </table>

    <table oncontextmenu="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" onclick="freset()" value='确定'>

            </td>

            <td bordercolor="#E1E100">

                <input type="button" onclick="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" onclick="sss()" value='申请提交'>

    </p>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  table button function input filter border
相关文章推荐
新的分享
章节导航