燈箱效果
<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>


Previous in This Category: .hover 滑鼠指標 指入/指出
Only members can post a comment, Login first