SimpleModal, как закрыть всплывающее окно с анимацией - PullRequest
Новая
       13

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

2 голосов
/ 08 июня 2010

Я очень новичок в jQuery. У меня есть квестино о SimpleModal.

Я пытаюсь закрыть всплывающее окно с эффектом анимации, но не получилось.

Вот мой код. 

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

Когда я нажимаю на ссылку "Закрыть", ничего не происходит. Любая помощь, пожалуйста? Большое спасибо!

Ответы [ 2 ]

3 голосов
/ 08 июня 2010

Оригинальный, принятый ответ

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

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

Вот код 

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

В качестве примечания: если вы добавите класс simplemodal-close к #btnClose, simpleModal автоматически закроет диалоговое окно, и вам не нужно будет связывать событие click самостоятельно. Новый ответ на основе обратной связи

Хорошо, я неправильно понял, как работает это дополнение, я думал, что это похоже на простой диалоговый плагин 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();
        }
    });
});
1 голос
/ 09 июня 2010

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

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

        });
...