屏幕彈出層,淡入淡出

今天要做一個屏幕彈出層淡如淡出的效果,在網上找了一些例子,總結了一下,寫了個控件。

我希望把程序中的各個功能,儘量以控件的形式寫出來。

<%@ 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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章