July 8, 2013

燈箱效果


<script>
            $(document).ready(function(){
                $("#userName").val("");
                $("#userPassword").val("");
                $("#LoginLink").click(function(){                    
                    $("#MaskDiv").css({
                        "width":$(document).width(),
                        "height":$(document).height()
                    }).show();
                    $("#LoginDiv").css({
                        "left":($(document).width()-300)/2,
                        "top":($(document).height()-250)/2
                    }).show();
                });
                $("#CancelBtn").click(function(){
                    $("#MaskDiv").hide();
                    $("#LoginDiv").hide();
                });
                $("#OKBtn").click(function(){
                    $("#name").text($("#userName").val());
                    $("#password").text($("#userPassword").val());
                    $("#MaskDiv").hide();
                    $("#LoginDiv").hide();
                });
            });            
</script>

<body>
        <a id="LoginLink" href="#">會員登入</a>
        <p><span id="name"></span></p>
        <p><span id="password"></span></p>
        <div id="MaskDiv"></div>
        <div id="LoginDiv">
            <table width="300" cellpadding="10">
                <thead>
                <tr>
                    <td colspan="2" align="center"><h2>會員登入</h2></td>
                </tr>
                </thead>
                <tbody>
                    <tr>
                        <td align="right" width="80"><b>帳號:</b></td>
                        <td><input type="text" id="userName" name="userName" value="" /></td>
                    </tr>
                    <tr>
                        <td align="right"><b>密碼:</b></td>
                        <td><input type="password" id="userPassword" name="userPassword" value="" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                        <input id="OKBtn" type="button" value="登入" /> 
                        <input id="CancelBtn" type="button" value="取消" /></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>








0推薦此文章
Today's Visitors: 0 Total Visitors: 1
Personal Category: $ JQuery Topic: technology / tech info / programming
Previous in This Category: .hover 滑鼠指標 指入/指出  

誰來收藏
Loading ...
unlog_NVPO 0