今天要做一個屏幕彈出層淡如淡出的效果,在網上找了一些例子,總結了一下,寫了個控件。
我希望把程序中的各個功能,儘量以控件的形式寫出來。
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="屏幕彈出層.ascx.cs" Inherits="屏幕彈出層.屏幕彈出層" %>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script><script type="text/javascript">
// var sWidth, sHeight;//取屏幕的寬和高
// sWidth = screen.width;
// sHeight = screen.height;
var cWidth, cHeight; //取窗體的寬和高
cHeight = document.documentElement.clientHeight;
cWidth = document.documentElement.clientWidth;
function fadeIn() {
$("#popup").fadeIn(1000); //速度毫秒
$("#popup").css("width", cWidth);
$("#popup").css("height", cHeight);
}
function fadeOut() {
$("#popup").fadeOut(2000);
}
function fadeTo() {
$("#popup").fadeTo(1000, 0.5); //參數1指速度,參數2指透明度
$("#popup").css("width", sWidth);
$("#popup").css("height", sHeight);
}
</script>
<style type="text/css">
/*大背景div樣式*/
.BackGroundBigDiv
{
display: none;
background-color: silver;
position: absolute;
left: 0;
top: 0;
}
/*中間小div樣式*/
.TheCenterOutDiv
{
}
</style>
<div>
<input type="button" value="彈出層" οnclick="fadeIn()" />
<input type="button" value="半透明彈出層" οnclick="fadeTo()" />
<div class="BackGroundBigDiv" id="popup">
彈出層的試驗
<input type="button" value="取消" οnclick="fadeOut()">
</div>
</div>