Simple modal pattern

Updated to make use of Template.dynamic, which allows passing in a dynamic template

A pattern demonstrating a reusable modal dialog by dynamically rendering a Template using a Session value.


  <p>Body content</p>
  <button class="modal" data-modal-template="modalOne">Modal One</button>
  <button class="modal" data-modal-template="modalTwo">Modal Two</button>
  {{> modal}}

<template name="modal">
  {{#if activeModal}}
    <div class="modal">
      {{> Template.dynamic template=activeModal}}

<template name="modalOne">
  <h1>Modal One</h1>

<template name="modalTwo">
  <h1>Modal Two</h1>

Helpers and event handling{
  'click button.modal': function(event, template) {
    var name = template.$('modal-template');
    Session.set('activeModal', name);

  activeModal: function() {
    return Session.get('activeModal');


We've created a data-modal-template attribute on our buttons in order to avoid requiring a click handler for each individual button.

For more information on Blaze (Meteor's template rendering engine) and rendering dynamic templates, see

Dynamic template includes with Blaze

Example project
Grab the example project from GitHub.