SimpleModal и JQuery (как сделать анимацию открытия и закрытия)?

http://www.ericmmartin.com/projects/simplemodal/

Внизу страницы есть два примера, которые показывают, как выполнять анимацию открытия или закрытия.

Я новичок в jquery. Как я могу объявить одновременно onOpen и onClose? (Мне удавалось заставить работать только одного.

jQuery(function ($) {
    $('a.basic').click(function (e) {
        e.preventDefault();
        $('#basic-modal-content').modal(
            {
                onClose: function (dialog)
                {
                    dialog.container.fadeOut('slow', function () {
                    });
                }
            }
        );
    });

});

Спасибо за любую помощь, которую вы можете предоставить.


jquery simplemodal
person Matthew    schedule 22.03.2010    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Вам просто нужно определить параметр onOpen в отображении объектов:

function myOpen(dialog){
    // Do something with the dialog
}
function myClose(dialog){
    // Do something else with the dialog
} 
$('#basic-modal-content').modal({ onOpen: myOpen, onClose: myClose });

Или вы можете объявить обратные вызовы в вызове функции, как вы это сделали в своем сообщении:

$('#basic-modal-content').modal({
    onOpen: function(){
        // Do something with the dialog
    },
    onClose: function(){
        // Do something else
    }
 });
person ground5hark    schedule 22.03.2010
comment
Есть ли способ настроить его для работы с любым модальным окном? Вместо того, чтобы объявлять это каждый раз для каждого diff (в данном случае basic-modal-conent '), есть ли способ сделать анимацию одинаковой для всех модальных окон? Кроме того, по какой-то причине, когда я кладу onOpen и onclose, как вы предложили, когда окно открывается, оно сразу же закрывается - person Matthew; 22.03.2010
comment
Чтобы настроить таргетинг на все модальные окна, вам нужно просто добавить «модальный» класс к каждому элементу DOM, в котором он вам нужен, а затем нацелить его на $ ('. Modal'). Можете ли вы опубликовать свой точный код для onOpen и onClose? - person ground5hark; 22.03.2010
comment
Дело в том, что каждый уникален. Например, на странице может быть две ссылки. Одна ссылка под названием «Зарегистрировать другой титулованный контакт». Ссылка с названием register должна открывать div с идентификатором simplemodal-register, а контакт должен открывать simplemodal-contact. У меня будет несколько из них на веб-сайте, поэтому я бы предпочел сжать код, не переписывая его для каждого нужного мне div. Пример кода находится здесь: ericmmartin.com/projects/simplemodal/#example-10 Спасибо за вашу помощь. - person Matthew; 22.03.2010
comment
В чем разница между каждым уникальным модальным окном? Если вы не меняете css или размер модального окна, то реализация класса, о которой упоминает @bobthabuilda, будет лучшим способом. В противном случае вам придется стилизовать каждое модальное окно отдельно, что, на мой взгляд, кажется плохим дизайном. - person ryanulit; 22.03.2010

arrow_upward
0
arrow_downward

Прочитав ваш последний комментарий, согласен с рянулит. Однако вот одно решение для достижения того, что вы описали. Вы можете сделать что-то вроде этого для ссылок для контактов и регистрации:

<a href="#">Contact</a>
<a href="#">Register</a>

Вы можете сделать что-то вроде этого:

$('a[href=#]').click(function(){
    // Will reference 'contact' or 'register'
    var modalType = $(this).text().toLowerCase();
    $('simplemodal-' + modalType).modal({ /* Options... */ });
});
person ground5hark    schedule 22.03.2010

arrow_upward
0
arrow_downward

Ответьте на один из вопросов:

Если вы хотите установить параметр один раз для всех модальных окон, вы можете сделать это с помощью:

$.modal.defaults.onClose = function (dialog) {
     // your code
     $.modal.close();
}
person Eric Martin    schedule 23.03.2010
comment
Привет, Эрик. Спасибо за отличный товар! Мне интересно узнать о методе onClose. У меня есть код, похожий на вызов @Nathan onClose ниже. Когда я вызываю модальное окно для всплывающего окна на document.ready (), а затем закрываю его с помощью кнопки закрытия, затем вызываю его снова, щелкнув кнопку из другого элемента на странице, а затем снова пытаюсь закрыть его с таким же закрытием нажатие кнопки не сработает? Клавиша ESC работает всегда. Что-то мне не хватает? Я могу создать еще одну цепочку вопросов и скрипку, если вам нужен пример. - person Tyler Rafferty; 27.12.2013

arrow_upward
0
arrow_downward

Самый простой способ сделать это - просто объединить два примера, которые он предоставляет здесь:

// Открытие анимации

$("#sample").modal({onOpen: function (dialog) {
    dialog.overlay.fadeIn('slow', function () {
        dialog.data.hide();
        dialog.container.fadeIn('slow', function () {
            dialog.data.slideDown('slow');   
        });
    });
}});

// Закрытие анимации

$("#sample").modal({onClose: function (dialog) {
    dialog.data.fadeOut('slow', function () {
        dialog.container.hide('slow', function () {
            dialog.overlay.slideUp('slow', function () {
                $.modal.close();
            });
        });
    });
}});

// Комбинированные анимации

$("#sample").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.hide('slow', function () {
            dialog.overlay.slideUp('slow', function () {
                $.modal.close();
            });
        });
    });
}});
person Nathan    schedule 19.01.2013