css转换不工作对话框

我想弄清楚为什么此代码中的对话框的淡入淡出和无法正常工作。

I am trying to figure out why the fade in and out of a dialog box in this code is not working properly.

我想要做的是有点击淡入和淡出。但我试图做这个淡入/出与CSS只是。
当我手动删除控制台中的类活动效果工作，但不是当我实际点击链接（打开对话框）。

What I'm trying to do is having a fade in and out on click. But I am trying to do this fade in/out with CSS only though. When i remove manually the class "active" in the console the effect works, but not when I actually click on the link (to open the dialog box).

这是我的代码

CSS：

.modal {
    display: block;
    overflow: auto;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-image: url('pixel.png');
    opacity: 1;
}
.modal-dialog {
    max-width: 600px;
    background-color: white;
    z-index: 99;
    min-height: 200px;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.modal-dialog .active {
    opacity: 1;
    background-color: #ffffff;
    border: 1px solid #999;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

我的JS（以防万一）：

My JS (just in case):

$('body').on('click', '[data-modal]', function (e) {
        e.preventDefault();
        $('body').addClass('modal-open');
        $('body').append("<div class='modal'></div>").addClass('active');
        $('.modal').append("<div class='modal-dialog'></div>")
        $('.modal-dialog').html("<div class='modal-inner generic-content'></div>").addClass('active');