今天要做一个屏幕弹出层淡如淡出的效果,在网上找了一些例子,总结了一下,写了个控件。
我希望把程序中的各个功能,尽量以控件的形式写出来。
<%@ 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>