Блог

Пожалуйста, взгляните на beta.gulfdine.com . Вы увидите ссылку «Войти». Щелчок по нему запускает наложение jQuery.

Теперь нажмите «Зачем присоединяться?». При этом запускается другое наложение, внутри которого есть ссылка «Зарегистрироваться сейчас». Щелчок по нему открывает предыдущее наложение.

Теперь вот в чем проблема. Вы заметите, что оба наложения имеют опцию «выставлять», которая показывает их с затемненной остальной частью экрана. Это отлично работает, когда оба открываются независимо. Однако, когда я запускаю наложение регистрации изнутри «Зачем присоединяться?», эффект expose не отображается. Также щелчок за пределами наложения не работает.

Вот код:

 /*Overlays*/
var whyJoinOverlay = $("a.whyJoin[rel]").overlay({ expose: '#000', top: 'center', api: true });
var loginLinks = $("a.loginLinks[rel]").overlay({ expose: '#000', top: 'center', api: true });

$("a.callToAction").click(function (e) {
    e.preventDefault();
    whyJoinOverlay.close();
    loginLinks.load();
});
  

Это из-за того, что я что-то делаю неправильно, или это ошибка в наложении jQuery?

Проблема в том, что этой fadeOut анимации не разрешается завершаться до загрузки нового модального. Я немного покопался в документации и не смог найти способ передать обратный вызов close() функции, но вам нужно будет найти какой-то способ сделать это. Когда это произойдет, ваш код будет выглядеть примерно так:

 $("a.callToAction").click(function (e) {
    e.preventDefault();
    whyJoinOverlay.close(function()
    {
        loginLinks.load();
    });
});
  

Это гарантирует, что close функция завершится до того, как load функция начнется, другими словами, гарантирует, что действия будут синхронными. Однако, как я уже сказал, вам может потребоваться проявить творческий подход к тому, как этот обратный вызов передается close функции: для этого может потребоваться спецификатор имени JSON или его может потребоваться определить заранее. Если вы не можете найти способ сделать это, это ограничение библиотеки, которое вы можете либо добавить, либо придумать способ заменить.

Похоже, Джимми был на правильном пути относительно причины ошибки.

Оказывается, что существует встроенное значение, которое необходимо изменить, чтобы заставить это работать, как я узнал на форумах jQuery Tools:http://flowplayer.org/tools/forum/40/41903

Измененный код теперь выглядит следующим образом:

 var whyJoinOverlay = $("a.whyJoin[rel]").overlay({
    top: 'center',
    api: true, 
    mask: {
        color: "#000",
        loadSpeed: 0,
        closeSpeed:0,//this is REQUIRED for the next overlay to work
        opacity: 0.9
        } 
});

var loginLinks = $("a.loginLinks[rel]").overlay({ expose: '#000', top: 'center', api: true });
/* No longer any need for the $("a.callToAction").click() function */