Close modal which has been created in another event function

Question

On my first event I will open a mbox dialog. mbox is a kind of extention for bootbox, which is for showing a modal. I need mbox to use another template as modal content.

So in the modal will be loaded with the content of createElement-Template. If the user has done some input changes the modal should be closed. Therefore there is the function modal("hide"). But as bbox is been set in the first template-event and the closing of the modal will be done in the second template-event, I got problems to close the modal.

events

Template.main.events({
    'submit form': function(event, template) {
        event.preventDefault();

        var bbox = mbox.dialog({
            title: 'title',
            message: Template.createElement
        });
    }
});

Template.createElement.events({
    'change input': function(event, template) {
        bbox.modal('hide');
    }
});

UPDATE

The above problem works with a global var. Thanks for to Adam for that.

But not I would like to destroy a modal in a meteor package, which was created by another package. I tried to use a global var and I tried to use api.export(). But still it doesn't work. I also tried to work with Sessions.

package-graph/lib/client/graph.js

var bbox;
CanvasManager = {
    onShowAddToolTip (element) {
        bbox = mbox.dialog({ // <-- Create Modal
            title: "Title",
            message: Template.search, // <-- Loading Template search with just one input field with typeahead
        });
    },
}

CanvasManger.create(...);

package-graph/lib/package.js

api.export('bbox');

The second package provide a typeahead-searchbox (sergeyt:typeahead). By creating the modal in the first package, the Template will be loaded in the modal (helloludger:mbox). Now the user can search via typeahead and select an item. After the selection the modal should be destroyed by `modal('hide').

package-search/lib/client/events.js

Template.searchMain.onRendered(function() {
    Meteor.typeahead.inject();
});

package-search/lib/client/helper.js

Template.search.helpers({ // <-- getting the data for the input typeahead
    searchData: function() {
        return [
            {
                name: 'cat1',
                valueKey: 'title',
                displayKey: 'title',
                header: '<h3 class="category-name">Category</h3>',
                template: 'searchResults',
                local: function() {
                    return Collection.find().fetch();
                }
            }
        ]
    },
    selected: function(event, suggestion) { // <-- by selecting an item, I can process the data and remove the modal
            // do something
            bbox.modal('hide'); // <!-- destroy modal
            return;
        }
    }
});

Answer 1

Make bbox a global variable:

var bbox;
Template.main.events({
    'submit form': function(event, template) {
        event.preventDefault();

        bbox = mbox.dialog({
            title: 'title',
            message: Template.createElement
        });
    }
});

Template.createElement.events({
    'change input': function(event, template) {
        bbox && bbox.modal('hide');
    }
});