使用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文件

 

 

 

 

转载于:https://my.oschina.net/u/2487410/blog/638769