[DEPRECATED]: Backbone.js - Modal extension. Note: Development of this Extension has moved to Backbone UI: http://github.com/backbone-ui/modal

readme.md

Backbone.js Modal extension

A simple way to extend your website content using modal containers

Dependendies

• Backbone.js
• Underscore.js

This plugin also supports Backbone APP which automates the rendering process of html fragments, although it is not a mandatory dependency.

Install

Using Bower:

bower install backbone.ui.modal

Usage

After you include the contents of the assets folder in your app folder, the modal will be available to extend with custom options.

For example:

var MyModal = Backbone.UI.Modal.extend({
	options: {
                className: "my-modal",
                close: false
        }
});

Each time you instantiate modal a new container will be created with the class name .ui-modal

var modal = new MyModal();

Options

There are a number of things that can be set as options, towards customizing the modal for each specific case.

The options are split to the ones we use when setting up the modal and the ones used when rendering the template (if any).

Setup options

• tagName: (default: div) The type of tag that will be used to create the container of the new modal
• parentTag: (default: body) The parent container where the modal will be placed
• className: (default: modal) The class name assigned to the modal container

Template options

• overlay: (default: true) If we need to overlay the contents of the webpage with a seperate container.
• wrap: (default: true) If we want to wrap all the content in a ".content" container
• scroll : (default: true) If we want to disable scrolling when the modal is loaded
• close: (default: true) If we want to add a close button

Methods

In addition to adding your own methods, especially if you want to customize the rendering of the modal, you can call or extend any of the following that are already available in the view

• clickSubmit : triggered with input submission buttons in the popup

• clickClose : closes the popup container

Credits

Created by Makis Tracend (@tracend).

Released at Makesites.org

Originally called Backbone.Modal, published as a gist.

Distributed under the MIT license

backbone.ui.modal.css

.ui-modal {
	z-index: 99;
    position: absolute;
	height: 100%;
	width: 100%;
	text-align: center;
}

/* CSS centering: http://css-tricks.com/centering-in-the-unknown/ */
/* The ghost, nudged to maintain perfect centering */
.ui-modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.ui-modal .close {
	z-index: 999;
	position: absolute;
	top : 10px;
	right : 10px;
}


.ui-modal .overlay {
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
	background: rgba(0,0,0, 0.5);
	width: 100%;
	height: 100%;
}

.ui-modal .content {
    z-index: 999;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* FB theme */

.fb.ui-modal.fb {
	top: 50%;
	left: 50%;
	background: rgba(0,0,0, 0.5);
	-moz-border-radius: 15px;
	border-radius: 15px;
	padding: 16px;
}

.fb.ui-modal .content {
	position: relative;
	background: #eee;
	padding: 8px;
	width: 100%;
	height: 100%;
}

.fb.ui-modal article {
	height: 100%;
}

backbone.ui.modal.js

// Backbone.js Modal extension
//
// Created by: Makis Tracend (@tracend)
// Source: https://github.com/backbone-ui/modal
//
// Licensed under the MIT license: 
// http://makesites.org/licenses/MIT

(function(_, Backbone) {
	
	// fallbacks
	if( _.isUndefined( Backbone.UI ) ) Backbone.UI = {};
	
	// conditioning the existance of the Backbone APP()
	var View = ( APP ) ? APP.View : Backbone.View;
	
	Backbone.UI.Modal = View.extend({
        // every modal is a new instance...
        el: function(){ return $('<'+ this.options.tagName +' class="ui-modal '+ this.options.className +'"></'+ this.options.tagName +'>') },
        
		options : {
			close : true, 
			overlay : true,
			wrap : true ,
			scroll : true,  
			//layout : false,
			className : "modal",
			tagName : "div", 
            parentTag: "body"
		}, 
		// events
		events: {
			"click input[type='submit']" : "clickSubmit",
			"click .close" : "clickClose"
		}, 
        
		initialize: function( options ){
			_.bindAll(this, 'center', 'resize','scroll', 'clickSubmit', 'clickClose');
			
            var self = this;
			//  el will be created by the className if not supplied...
			$( this.options.parentTag ).append( this.el );
            
			// unbind all previous modal events
			//$(this.el).unbind();
			
			// event handling - center window
			$(window).resize(function(){
            //    self.resize();
				self.center();
			});
			self.center();
			
            return View.prototype.initialize.call( this, options );
			
		},
        /*
		setup: function( template ){
			var self = this;
			// include snippets
			// - add close button 
			if( this.options.close ){ 
				template = '<a class="close">[x]</a>' + template;
			}
			// - wrap the content
			if( this.options.wrap ){ 
				template = '<div class="content">'+ template +'</div>';
			}
			// - add overlay
			if( this.options.overlay ){ 
				template = '<div class="overlay"><!-- --></div>' + template;
			}
			// override default template with your own compiler...
			this.template = _.template( template );
			// loop through all the handlebar templates
			
			$(template).filter("script").each(function(){
				var id = $(this).attr('id');
				self.template[id] = Handlebars.compile( $(this).html() );
			});
			
			// attempt to render straight away
			this.render();
			
		}, 
		render: function(){
			if( !this.template ) return;
			var data = ( this.data ) ? this.data.toJSON() : {};
			var html = this.template( data );
			// add el to the DOM (if not available)
            if(!$(this.el).parent().length){
                $("body").find("script:first").before(this.el);
            }
			$(this.el).html( html );
			// display (in case the container is hidden)
			$(this.el).show();
			// center after rendering
			this.center();
			// check scrolling
			this.scroll( false );
		}, 
        */
        
        postRender: function(){
            // display (in case the container is hidden)
			$(this.el).show();
			// center after rendering
			this.center();
			// check scrolling
			this.scroll( false );
        }, 
        
		update: function(){
			// render the view
			//this.render();
			// presentation updates
			//this.center();
		},
		// helpers
		center: function(){
            var scrollTop = document.getElementsByTagName("body")[0].scrollTop || document.getElementsByTagName("html")[0].scrollTop || 0;
			$(this.el).css("top", scrollTop+"px");
			/*
			// find the content container, fallback to the outter container
			var container = ($(this.el).find(".content").length ) ? $(this.el).find(".content") :  this.el;
			var width = $(container).width();
			var height = $(container).height();
			// Firefox / IE scroll the html tag - Webkit (properly) the body tag...
			var scrollTop = document.getElementsByTagName("body")[0].scrollTop || document.getElementsByTagName("html")[0].scrollTop || 0;
			var top = scrollTop + (window.innerHeight/2) - (height/2);
			var left = (window.innerWidth/2) - (width/2);
			$(container).css("top", top+"px");
			$(container).css("left", left+"px");
			// position the overlay, if any
			if($(this.el).find(".overlay").length ){
				$(this.el).find(".overlay").css("top", scrollTop+"px");
			}
            */
		}, 
		resize: function( e ){
			// re-calculate proportions...
		}, 
		// click triggers
		clickSubmit: function( e ){
			e.preventDefault();
			
			// process request...
			
			// after sending the request, close the panel
			this.clickClose();
			
			return false;
			
		},
		clickClose: function( e ){
			e.preventDefault();
			// remove all contents
			$(this.el).empty();
			// unbind events
			$(this.el).unbind();
			// hide from the page
			$(this.el).remove();
			// check scrolling
			this.scroll( true );
			
			return false;
		},
		scroll : function( flag ){
			if( !this.options.scroll && app ){
				// check if there's a model for the app state
				if(app.state){ 
					if( app.state instanceof Backbone.Model ){
						app.state.set({ scroll : flag }); 
					} else {
						app.state.scroll = flag; 
						// trigger app.update
						if(app.update) app.update();
					}
				} else {
					app.scroll = flag;
					// hardcode a 'no-scroll' class on the body? 
				}
			}
		}
	});

})(this._, this.Backbone);

component.json

{
  "name": "backbone-ui-modal",
  "version": "0.4.0",
  "main": ["./js/backbone.ui.modal.js"],
  "dependencies": { 
	  "backbone" : "*", 
	  "underscore" : "*", 
	  "jquery" : "~1.8.2"
  }
}

modal.html

{{if options.overlay}} 
<div class="overlay"><!-- --></div>
{{/if}}

{{if options.wrap}}<div class="content" role="content">{{/if}}

{{if options.close}} 
<a class="close">[x]</a>
{{/if}}

<!-- Modal Content -->
<img src="{{image}}">
<!-- Modal Content -->

{{if options.wrap}}</div>{{/if}}

This gist is now DEPRECATED.
Project moved: http://github.com/backbone-ui/modal