Question

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

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

以下是我的代码的样子：JSFIDDLE

对我来说，div第一次出现（虽然不是以某种方式出现在这个小提琴中），并且下次点击它时，它只是让它的显示可见（动画不再重复）。如果有人能够指出我在这里缺少什么或者在上面的代码中出了什么问题，那将是很棒的。

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

FIDDLE

对animate()参数的说明。 Slow已经意味着持续时间为200，因此您不必再次传递。

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

2 个答案: