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

Question

我正在一个小型网站上工作，单击时必须在布局中安排一些divs ，我必须通过动画来显示modal window 。

出现之后，当用户按下Esc ，模态窗口必须关闭，并且如果再次单击该按钮，则应再次打开，效果相同。

我的代码如下所示： JSFIDDLE

对我而言，div第一次出现（尽管不知何故不在此小提琴中出现），而下次单击它时，它只是使其显示可见（动画不再重复）。 如果有人可以指出我在这里缺少什么或上面的代码有什么问题，那就太好了。

Answer 1

解决方案： 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

不确定这是否是您想要的，但是您去了

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

小提琴

有关animate()参数的注释。 Slow已经意味着持续时间为200，因此您无需再次通过。