Quickbox с MooTools 1.4 - PullRequest
Новая
       35

Quickbox с MooTools 1.4

0 голосов
/ 25 сентября 2011

Я опробовал несколько лайтбоксов для своего сайта, используя MooTools 1.4, и нашел этот, который работает и выглядит действительно красиво (с простой реализацией):

http://andrewplummer.com/code/quickbox/

На демонстрационном веб-сайте лайтбокс работает отлично, при нажатии на изображение выводится наложение и изображение, а при нажатии на наложение они удаляются.

На моем веб-сайте, когда вы щелкаете по изображению, которое помечено соответствующим образом, всплывающее окно появляется, и все работает правильно, однако, когда вы выходите из окна лайтбокса, нажимая наложение или нажимая q / x / esc, наложение скрывается и все выглядит отличный. Единственная проблема в том, что по какой-то причине это встроено в тело моего кода:

<div id="qbOverlay" style="display: block; width: 100%; height: 100%; opacity: 0; "></div>

Проблема, которую это вызывает, заключается в том, что она не удаляется после закрытия лайтбокса, поэтому вся страница в

очищается. 
#qbOverlay {
    display: block;
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    cursor: pointer;
 }

Это проблема, потому что это делает верхнюю часть страницы наложенным и никогда не удаляется после закрытия лайтбокса. Когда это так, я не могу нажимать какие-либо ссылки или использовать какие-либо поля ввода в области, которую он охватывает.

У меня такое ощущение, что причина этой проблемы заключается в следующем: 

close: function(){
    this.quickBox.setStyle("display", "none");
    this.quickBox.setStyle("cursor", "auto");
    this.overlay.fade("out");
    this.active = false;
}

Я пытался использовать MooTools с режимом совместимости и включать все дополнительные функции, но безуспешно.

1 Ответ

2 голосов
/ 25 сентября 2011

Это реальная ошибка в mootools 1.4 https://github.com/mootools/mootools-core/issues/2074

Это будет исправлено на этой неделе в 1.4.1 (надеюсь), но вы можете взять обновленный код прототипов ярлыков элементов Fx.tween для затухания здесь: https://github.com/cpojer/mootools-core/commit/11b4257f12a51454bd513ab1ac32cd5239d66098

В качестве альтернативы, используйте простую анимацию непрозрачности вместо .fade(), она предположительно работает. Вы также можете уничтожить оверлей, что для меня лучшее решение

...