css transition not working on dialog box - css

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;