CODEWITHSUNDEEP
javascriptjqueryhtmlcssmodal-dialog
user1240679
user1240679

Reputation: 6979

Show and hide a popup on div click

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.

Upvotes: 0

Views: 5367

Answers (2)

Spokey
Spokey

Reputation: 10994

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.

Upvotes: 0

Egor Nepomnyaschih
Egor Nepomnyaschih

Reputation: 992

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": ""
        });
    }
});

Upvotes: 1

Related Questions