FancyBox с другим событием

Question

У меня проблема с моей кнопкой FancyBox, я получил кнопку, которая запускает IFRAME, это код для кнопки:

<a class="fancybox fancybox.iframe btn btn-green" href="url.php?id=45">Open More Information</a> 

Как вы можете видеть, что это имеет 4 класса , сначала 2, чтобы открыть fancybox, последние 2 для моего css. Я хотел бы видеть, что когда вы нажимаете на кнопку, что класс btn-green удаляет, вы можете видеть, что вы уже нажали на нее.

$('.fancybox.iframe').fancybox({ 
    arrows: false, 
    padding: 0, 
    helpers: { 
     overlay: { 
      locked: false 
     } 
    }, 
    beforeShow: function() { 
     $("body").css({ 
      'overflow-y': 'hidden' 
     }); 
    }, 

    afterClose: function() { 
     $("body").css({ 
      'overflow-y': 'visible' 
     }); 
     $(this).removeClass("btn-green"); 
    } 
}); 

Но это не сработает, может ли кто-нибудь мне помочь? Спасибо в поход.

Answer 1

Во-первых, вам нужно связать FancyBox с .fancyboxкласса и не .fancybox.iframe как объяснено here (№ 2 и 3)

Во-вторых, вы можете обратиться к this с использованием this.element внутри любого FancyBox Обратный вызов так попробовать:

afterClose: function() { 
    if (this.element.hasClass("btn-green")) { 
     this.element.removeClass("btn-green"); 
    } 
} 

См JSFIDDLE