Untitled

.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('/assets/images/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;

}

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

<body>
    <input type="button" id="open" value="Open"/>
</body>

$('body').addClass('modal-open');

    $('body').append("<div class='modal' style='display:none'></div>").addClass('active');

    $('.modal').append("<div class='modal-dialog'></div>")

    $('.modal-dialog').html("<div class='modal-inner generic-content'>/div>").addClass('active');


$('#open').on('click', function(e){
    $(".modal").fadeIn(400);
    $(this).focusout();
    $("body").focusin();
});

$("body").keydown(function(evt){
    if(evt.keyCode == 13)
    {
        $(".modal").fadeOut(400);
    }
});

$("div").click(function(evt){
    $(".modal").fadeOut(400);
});