Backbone lightbox component
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
javascript Add handlebars to require statement May 5, 2015
sass Ooops missed a colon May 4, 2015
templates Bring in lightbox component and dependencies May 4, 2015
LICENSE Initial commit May 4, 2015
README.md highlighter did not work in markdown on github :O May 4, 2015

README.md

lightbox

A simple Backbone lightbox component. Need to put a form, or some other custom content into a popup overlay? Just use this lightweight lightbox backbone component (basically just a view).

HTML Template

Make sure to swap in your template compiling and loading method in lightbox.js. The way its coded right now will always compile the template and also look for it within the page.

Render lightbox

define(function(require){

    var Backbone = require("backbone");
    var Lightbox = require("path/to/lightbox");

    // We want to render this email form within the lightbox
    var EmailFormView = require("content/within/lightbox");
    
    var ContactView = Backbone.View.extend({

        template: "YourTemplate.handlebars",

        initialize: function(options) {
            // init logic here
        },

        events: {
            "click .email-form": "showForm"
        },

        render: function() {
            // render logic

            this.selElement($(this.template()));
            return this;
        },

        showForm: function(event) {
            this.emailForm = new EmailFormView();

            this.lightbox = new Lightbox({
                content: this.emailForm.render().el
            });

            // Calling render will show the popup
            this.lightbox.render();
        }

    });


    return ContactView;

});