SimpleModal, How to close pop up window with animation

Question

Hi, I am very new to jQuery. I have a questino about the SimpleModal.

I am trying to close the pop up window with animation effect, but failed.

Here is my code.

 $('#btnClose').click(function(e) {
            // Closing animations
            $("#content").modal({ onClose: function(dialog) {
                dialog.data.fadeOut('slow', function() {
                    dialog.container.hide('slow', function() {
                        dialog.overlay.slideUp('slow', function() {
                            $.modal.close();
                        });
                    });
                });
            }
            });

        });
<div id="content" style="display: none;">
    <h1>Basic Modal Dialog</h1>
    <a href='#' id="btnCloset">Close</a>
</div>

When I click on the "Close" link, nothing happens. Any help please? Thank you very much!

Answer 1

Original, accepted answer

Nothing is happening because you misspelled btnClose in your HTML id tag (you're calling it btnCloset). Nonetheless, it wouldn't work with the provided code, as this is what it does: When you click on the btnClose link, you are creating a simpleModal box out of #content, and telling it that when it closes, it should do the stuff in the onClose option (which is correct). So you aren't actually telling it to close anywhere, just telling it that it's a modal dialog.

Instead you should create the modal out of the #content element, as you do now, but do it separately from #btnClose's click event. Then you should bind click event to close the dialog.

Here's some code

$(function() {
    /* Make #content a modal */
    $("#content").modal(
     {
        onClose: function(dialog) {
            dialog.data.fadeOut('slow', function () {
                dialog.container.slideUp('slow', function () {
                    dialog.overlay.fadeOut('slow', function () {
                        $.modal.close(); // must call this!
                    });
                });
            });

        }
     }
    );

    /* When #btnClose is clicked, close the modal */    
    $('#btnClose').click(function(e) {
        $.modal.close();
    });
});

---

As a side note, if you add the class simplemodal-close to #btnClose, simpleModal will automatically make it close the dialog, and you don't have to bind the click event yourself.

New answer based on feedback

Ok, i misunderstood how this addon works, i thought it was like the plain jQuery dialog plugin, but as i understand now, the goal is to make an existing, visible element a dialog and when closing it, transform it back to its original form. The new code keeps track of the state of the dialog (by storing doOpen in the data of the link and toggling it on each click) and both opens and closes the dialog. Hope this is closer to how you wanted it to work :)

$(function() {
    $("#btnClose")
    .data("doOpen", true)
    .click( function() {
        /* check whether or not we are to open or close the dialog */
        var doOpen = $(this).data("doOpen");
        /* toggle the data */
        $(this).data("doOpen", !doOpen);

        if (doOpen) {
            $("#content").modal({
                onClose: function(dialog) {
                    dialog.data.fadeOut('slow', function () {
                        dialog.container.slideUp('slow', function () {
                            dialog.overlay.fadeOut('slow', function () {
                                $.modal.close(); // must call this!
                            });
                        });
                    });
                }
            });
        }
        else {
            $.modal.close();
        }
    });
});

Answer 2

Here is the code, which is working perfectly.

$('#btnOpen').click(function(e) {
            $('#content').modal({
                onOpen: function(dialog) {
                    dialog.overlay.fadeIn('slow', function() {
                        dialog.data.hide();
                        dialog.container.fadeIn('slow', function() {
                            dialog.data.slideDown('slow');

                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('slow', function() {
                        dialog.container.slideUp('slow', function() {
                            dialog.overlay.fadeOut('slow', function() {
                                $.modal.close(); // must call this!
                            });
                        });
                    });
                }
            });

        });
        $('#btnClose').click(function(e) {
            $.modal.close();

        });