Question

Not entirely sure why.. here is my render :

render: function() {

  var html = this.template(this.model.toJSON());
  $(this.el).html(html);

  $.fancybox( this.$el.html() );

The fancybox loads. But none of my otherwise working buttons are clickable. If I do not load it in a fancybox, and instead, pass an $el that is located on the DOM somewhere, then all the events and dynamic content is properly loaded.

How do I load this content into a FancyBox popup?

Answer 1

You want to pass the element to fancybox, not just a string of HTML. Try this:

render: function() {
    var html = this.template(this.model.toJSON());
    $(this.el).html(html);
    $.fancybox(this.$el);
}