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