SimpleModal, Как закрыть всплывающее окно с анимацией

Исходный, принятый ответ

Ничего не происходит, потому что вы неправильно написали btnClose в теге идентификатора HTML (вы называете его btnCloset). Тем не менее, это не будет работать с предоставленным кодом, поскольку он делает следующее: когда вы нажимаете на ссылку btnClose, вы создаете блок simpleModal из #content и сообщаете ему, что когда он закроется, он должен делать то, что нужно. в варианте onClose (что правильно). Таким образом, вы на самом деле не говорите ему закрыться, просто говорите, что это модальный диалог.

Вместо этого вы должны создать модальное окно из элемента #content, как вы делаете сейчас, но сделать это отдельно от события клика #btnClose. Затем вы должны связать событие click, чтобы закрыть диалог.

Вот код

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

Хорошо, я неправильно понял, как работает этот аддон, я думал, что это похоже на простой плагин диалога jQuery, но, как я понимаю сейчас, цель состоит в том, чтобы сделать существующий видимый элемент диалогом и при его закрытии преобразовать его обратно в исходную форму. . Новый код отслеживает состояние диалога (сохраняя doOpen в data ссылки и переключая его при каждом щелчке), а также открывает и закрывает диалог. Надеюсь, это ближе к тому, как вы хотели, чтобы это работало :)

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

Вот код, который работает отлично.

$('#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();

        });