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

Implementing the Modal Functionality

Discover how to implement modal window functionality in Marionette.js by creating dedicated regions for modals, displaying edit forms upon user interaction, and using event-driven methods to dynamically adjust modal titles. This lesson helps you enhance user experience with efficient and reusable modal views for contact editing.

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: ...