Закрытие модального окна fancybox2 с помощью кнопки

У меня есть следующий скрипт:

<script>

$(function() {
    $('#close-button').click(function(event) {
        $.fancybox.close(true);
    });
});

</script>

Я пытаюсь закрыть модальное окно fancybox2, когда пользователь нажимает пользовательскую кнопку закрытия (forgetit_btn.jpg). Это то, что я пытался использовать:

<img id="close-button" src="_assets/img/forgetit_btn.jpg" />

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ:

Ниже приведен код, который я использую для вызова fancybox из page1.php.

$(document).ready(function() {
  $(".various").fancybox({
    maxWidth    : '100%',
    maxHeight   : 600,
    fitToView   : false,
    width       : '90%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    scrolling   : 'no'
  });
});

Ниже приведен код на page1.php, который открывает fancybox:

   <a class="various fancybox.iframe" href="page2.php">Inactivate My Profile</a>

Скрипт в самом верху этого поста находится на page2.php


person lobstahcrushah    schedule 08.06.2013    source источник
comment
Хорошо, а в чем проблема с кодом, который вы используете сейчас? Это ничего не делает? Сделать ошибку? Сломать компьютер? Заставить летающих обезьян падать с неба? Дать тебе бесплатные вафли? Просьба уточнить.   -  person tckmn    schedule 08.06.2013
comment
Это ничего не делает. Прости. Надо было это упомянуть.   -  person lobstahcrushah    schedule 08.06.2013
comment
попробуйте alert('test') в вашем прослушивателе кликов и посмотрите, получит ли он предупреждение   -  person tckmn    schedule 08.06.2013
comment
Я добавил предупреждение («тест»), и тест всплывающего предупреждения появляется, когда я нажимаю кнопку.   -  person lobstahcrushah    schedule 08.06.2013
comment
Тогда что-то не так с fancybox. Я не могу сказать, что из такого небольшого кода, мне понадобится немного больше контекста :)   -  person tckmn    schedule 08.06.2013
comment
Я добавил больше деталей в исходный пост   -  person lobstahcrushah    schedule 08.06.2013


Ответы (1)


Я думаю, это потому, что он загружается в iframe, а $.fancybox, который вы вызываете, не совпадает с тем, который открывается. См. это: HTML iframes и javascript.

Вы можете использовать событие afterShow в fancybox на вызывающей странице, чтобы прикрепить событие клика. Добавьте это в свои параметры на page1.php

afterShow : function() {
  $('#close-button', $('.fancybox-iframe').contents())
  .click(function(event) {
    $.fancybox.close(true);
  });
}

Или, если вы предпочитаете, в page2.php вам нужно будет получить доступ к области фреймов верхнего уровня и таким образом получить fancybox.

$(function() {
  $('#close-button').click(function(event) {
    frames.top.$.fancybox.close(true);
  });
});
person Scott Gearhart    schedule 08.06.2013
comment
Спасибо!! Последний способ - это то, как я попробовал первым, и он отлично работает! Спасибо, что научили меня чему-то! - person lobstahcrushah; 08.06.2013
comment
Внутри iframe вы также можете использовать parent.$.fancybox.close(true); - person JFK; 09.06.2013