在div单击上显示和隐藏弹出窗口

Question

I am working on a small website and have some divs arranged in the layout on the click of which I have to show a modal window by animation.

After it has appeared, when the user pressed Esc , the modal window has to close and should open again with the same effect if the button is clicked again.

Here's how my code looks like: JSFIDDLE

For me, the div appears first time (not appearing in this fiddle though somehow), and on clicking on it the next time, it just makes it's display visible (the animation doesn't repeat again). It would be great if somebody could point out what I am missing here or what's wrong in the above code.

Answer 1

Solution: http://jsfiddle.net/JMU8A/1/

$(document).on("keydown", function (event) {
    if (event.keyCode === 27) {
        $(".modal-mask").css("display", "");
        $(".modal-popup").css({
            "display": "",
            "width": "",
            "height": "",
            "top": "",
            "left": ""
        });
    }
});

Answer 2

Not sure if this is what you wanted but here you go

$(function () {
    $(".bigbutton").on("click", function () {
        $(".modal-mask, .modal-popup").fadeIn();
        $(".modal-popup").animate({
            width: '80%',
            left: '10%'
        }, 'slow', function () {
            $(".modal-popup").animate({
                'height': '80%',
                    'top': '10%'
            }, 200, "swing", function () {});
        });
    });
    $(document).on("keydown", function (event) {
        if (event.keyCode === 27) {
            $(".modal-popup").animate({
                width: '5%',
                left: '50%'
            }, 'slow', function () {
                $(".modal-mask, .modal-popup").fadeOut();
            });
        }
    });
});

FIDDLE

Notes to your animate() parameters. Slow already means that the duration is 200 so you don't have to pass that again.