javascript - 在 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，因此您不必再次通过。