jquerysimplemodal

SimpleModal, How to close pop up window with animation


I am very new to jQuery. I have a question 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. What can I try next?


Solution

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