css transition not working on dialog box

Question

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

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).

This is my code

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;
}

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');

Answer 1

Transition needs numeric value in order to set steps in between 2 rules statement. You should use : opacity instead display: http://jsfiddle.net/bJz7R/1/

$('a.click-me').click(function(){
   $('#open').css('opacity','1');
});

and replace in CSS:

display:none;

by

opacity:0;