Search⌘ K
Home/
Courses/
Introduction to Marionette.js – The Backbone Framework

Implementing the Modal Functionality

Learn how to add a DOM element for our modal window and how to add/change the title to the modal view.

We'll cover the following...

So far, we have implemented a modal view but haven’t added any functionality to it.

DOM element

If we want to display modal windows, we’ll need a region to show them. Let’s add a DOM element for our modal dialogs in the following code in line 7:

PHP
<div id="app-container">
    <div id="main-region" class="container">
        <p>Here is static content in the web page. You'll notice that it gets 
        replaced by our app as soon as we start it.</p>
    </div>
<div id="dialog-region"></div> 
</div>

We also need Marionette to configure this new DOM element as a region within our application:

Node.js
ContactManager.on("before:start", function(){
  var RegionContainer = Marionette.LayoutView.extend({
    el: "#app-container",
    regions: {
      main: "#main-region",
      dialog: "#dialog-region"
    }
  });
    ContactManager.regions = new RegionContainer();
});

Display on click

Let’s display our edit form in a modal window when the user clicks the edit link in our List view:

Node.js
// "childview:contact:show" handler
contactsListView.on("childview:contact:edit", function(childView, model){
  var view = new ContactManager.ContactsApp.Edit.Contact({
    model: model
  });
  view.on("show", function(){
    this.$el.dialog({
      modal: true,
      width: "auto"
    });
  });
  ContactManager.regions.dialog.show(view);
});
// "childview:contact:delete" handler

We reuse our Edit.Contact view from the Edit submodule and display it within a modal. This is achieved by calling jQuery UI’s dialog method on the view’s element. Take a look at how this behavior is organized: ...