9952 explained code solutions for 126 technologies

backbone.jsHow do I create a modal dialog using Backbone.js?

Creating a modal dialog using Backbone.js is relatively easy. The following example code will create a modal dialog:

// Create a new Backbone view
var ModalDialog = Backbone.View.extend({
  // Set the template
  template: _.template("<div class='modal-dialog'> <div> <h1><%= title %></h1> <p><%= message %></p> </div> </div>"),
  // Initialize the view
  initialize: function(options) {
    this.title = options.title;
    this.message = options.message;
  // Render the view
  render: function() {
    var html = this.template({
      title: this.title,
      message: this.message
    return this;

// Create a new instance of the modal dialog
var modal = new ModalDialog({
  title: 'My Modal Dialog',
  message: 'This is my modal dialog!'

// Render the modal dialog

The rendered modal dialog will look like this:

<div class="modal-dialog">
    <h1>My Modal Dialog</h1>
    <p>This is my modal dialog!</p>

Code explanation

  • ModalDialog - This is the Backbone view object that contains the template and logic for the modal dialog.
  • template - The template is a _.template() function that contains the HTML for the modal dialog.
  • initialize - This is the function that is called when the view is initialized and sets the title and message options.
  • render - This is the function that is called to render the view and creates the HTML for the modal dialog.

Helpful links

Edit this code on GitHub