Open modal pop-up using custombox.js in Meteor

Question

How can I open a model pop-up using the custombox.js plugin in Meteor?. It worked well on my non-Meteor page and now I can't seem to render it.

I think the issue is that custombox uses the .fn prototype of jquery because I'm getting a undefined function error. I tried with this since it is applied in a subtemplate of the layout (feedsItem which in turn is a subtemplate of feed).

The code is meant to open a modal pop-up with more details regarding a news post. The html code for the hyperlink where the modal pop-up should open when clicked is:

<a href="#modal" class="list-group-item" id="flip">Read More</a>

And the html to open as the modal pop-up (the close onclick will also be an event later.):

<div id="modal" style="display: none;" class="modal-example-content">

            <div class="modal-example-header">

                <button type="button" class="close" onclick="$.fn.custombox('close');">&times;</button>

                <h4>Detalhe da Noticia</h4>

            </div>

            <div class="modal-example-body">

                <p>Lorem Ipsum is simply dummy.</p>

            </div>

        </div>

My template events code is:

Template.feedsItem.events({
    'click #flip': function(e){
        var flip_position = ['vertical','horizontal'];
        $.fn.custombox( this, {
            effect:     'flip',
            position:   flip_position[Math.floor((Math.random()*2))]
        });
        e.preventDefault();
    }
});

EDIT I got the pop-up to show but now I get a 404 error when it opens. This is obviously because it isn't rendering the target div (modal). The problem was that I was rendering it in a child template instead of the parent (Feeds).

Answer 1

Try the new version:

http://dixso.github.io/custombox/

Regards.