<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.login{width:300px;height:200px;background-color:lightgreen;position:absolute;display:none;}
.cover
{
background-color:orange;
filter:alpha(opacity=50);
opacity:0.5;
position:absolute;
}
</style>
<title>遮蓋層</title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
在css中設置透明度IE:filter:alpha(opacity=50); 值從0~100
非IE：opacity:0.5; 值從0~1
在Jquery中設置透明度用屬性 opacity 值從0~1
*/
// 當窗口發生改變時調用此方法
$(window).resize(function () {
// 是否點擊了登陸按鈕
var canShow = false;
if ($(".cover").length > 0) {
canShow = true;
}
// 先是關閉覆蓋層
closeCover();
// 重新打開覆蓋層
if (canShow == true) {
showConver();
}
});
// 點擊登錄時
function showConver() {
// 遮蓋層 半透明
var $cover = $("<div class='cover'></div>");
// 添加遮蓋層
$("body").append($cover);
// 瀏覽器可見區域的大小 此處不能用$(window).width()是窗口高度 要用$(document).width()是文檔高度
var width = $(document).width();
var height = $(document).height();
$cover.css({ "width": width, "height": height,"top":"0px","left":"0px" });
// 計算登錄層的座標
var $login = $(".login");
// 當前可視窗口的寬度和高度
var $docWidth = $(window).width();
var $docHeight = $(window).height();
var x = ($docWidth - $login.width()) / 2;
var y = ($docHeight - $login.height()) / 2;
// position 的屬性一定要設置爲fixed 這樣不會受滾動條的影響
$(".login").css({ "display": "block", "top": y, "left": x, "opacity": 1, "z-index": "20", "position": "fixed" });
}
// 點擊關閉層時：
function closeCover() {
// 關閉 覆蓋層
$(".cover").remove();
// 隱藏登錄層
$(".login").css("display","none");
}
$(function () {
// 移動登陸框
$(".login").click(function () {
$(this).mousemove(function (e) {
var width = e.pageX;
});
});
});
</script>
</head>
<body>
<input type="button" id="btnLogin" οnclick="showConver()" value="loginOn" />
<div class="login">
<span></span>
<input type="button" value="關閉層" id="close" οnclick="closeCover()" />
</div>
<br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br />
<br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br />
<br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br />
<br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br /><br />a<br /> <br />a<br />
</body>
</html>