使用jQuery仿造bootStrap模態框

HTML：

<div class="modal-data"></div>
<div class="modal-hd">
    <div class="modal-ctt">
        <!--content-->
    </div>
</div>

<button>模態框</button>

CSS：

作遮罩層 modal-data:

.modal-data{
    background-color: #4F535F;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    display: none;
    text-align: center;
    z-index: 10;
    opacity: 0.8;
}
//fixed屬性的top: 0;bottom:0;保證在遮罩層能夠在垂直方向全覆蓋
//而且只有使用了定位（position）屬性，z-index纔會有效;

.modal-hd{
    z-index: 20;position: fixed; //這裏注意要用fixed，若使用absolute的話，當窗口能夠滑動時，白框就會
    //下滑滾軸的時候，白框被滑到頂部，不會固定在屏幕中
    width: 100%;padding-top: 50px;display: none;
}
//還要在套一層DIV是由於要使用z-index屬性，這樣纔不能保證白框能疊在modal-data上面而不是下面
//要使用z-index就得使用定位，可是使用了定位就居中不了，因此要套這一層DIV

.modal-ctt{
    width: 300px;height: 200px;background-color: white;margin: auto;opacity: 0;
    border-radius: 5px;
}
//這是真正的白框，一開始設置透明度爲零，爲了白框能夠由淺到深淡入，因爲白框沒有用到定位，所這裏也就能夠
//使用劇中了

JavaSCript/jQuery

//彈入
$("button").click(function(){
    //讓遮罩層先淡入
    $(".modal-data").fadeIn();
    //將隱藏的白框「顯示」，此時仍是透明
    $(".modal-ctt").parent().css("display","block");
    //使用setTimeout來延時是防止，白框比遮罩層先淡入
    setTimeout(function(){
        //使用攻城重要道具  animate動畫方法
        //分別讓margin-top和opacity在300毫秒內從0分別漸變到100px和1
        $(".modal-ctt").animate({
            marginTop:'100px',
            opacity: '1'
        },300);
    },500);
});
//彈出
//如下是上面的逆推，這裏我只設置了，點擊遮罩層觸發淡出
$(".modal-data").click(function(){
    $(".modal-ctt").animate({
        marginTop:'0',
        opacity: '0'
    },300);
    setTimeout(function(){
        $(".modal-data").fadeOut();
        $(".modal-ctt").parent().css("display","none");
    },300);
});

//我這裏是有用到jQuery的，因此要先引入jQuery文件