Meteor modal

ยง
by
Jesper bisgaard

I recently had to create a modal pop up in Meteor js, which proved to be quite easy so I thought I might share the solution here.

For handling modals I used the exellent library anti:modals which handles opening and closing the modals on a page. Now you just have to hook up the content for the modal and you are ready to rock!

Once you have added the library to your meteor site you can go ahead and add your modals.

First you setup the modal template, I am using Bulma for markup and styling in this example.

I have created a template file editExample.html

<template name="editExample">
  <div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">Edit example</p>
        <button id="close-edit-modal" class="delete" aria-label="close"></button>
      </header>
      <section class="modal-card-body">
        <form class="edit-example">
          <div class="field is-horizontal">
            <div class="field-label is-small">
              <label class="label" for="name">New example</label>
            </div>
            <div class="field-body">
              <div class="field">
                <p class="control is-expanded">
                  <input class="input is-small" type="name" name="name" placeholder="New example" value="{{example}}" />
                </p>
              </div>
            </div>
          </div>
          <div class="field is-horizontal">
            <div class="field-label">
              <!-- Left empty for spacing -->
            </div>
            <div class="field-body">
              <div class="field">
                <div class="control">
                  <input class="button is-primary is-small" type="submit" value="Save"/>
                </div>
              </div>
            </div>
          </div>
        </form>
      </section>
    </div>
  </div>
</template>

In this file we setup the html markup for our modal popup.

Now the next think we have got to do is create the functionality for this template. So we will create an editExample.js file.

import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';

// Import the template.
import './editExample.html';

// Store the example being passed to the modal.
Template.editExample.onCreated(function () {
  this.example = this.data.example;
});

// Setup event handling.
Template.editExample.events({
  // Clicking the close button.
  'click #close-edit-modal'() {
    // Close all active modal windows.
    AntiModals.dismissAll();
  },
  // Submitting the form in the modal window.
  'submit .edit-example'(event) {
    // Prevent default browser form submit.
    event.preventDefault();

    // Get value from form element.
    const target = event.target;
    const name = target.name.value;

    // Insert a expense into the collection.
    Meteor.call('example.update', this.example._id, name);

    // Clear form.
    target.name.value = '';

    // Close all active modal windows.
    AntiModals.dismissAll();
  },
});

Now we are ready to start using our modal popup.

In order to display your modal popup, we need to add a few things to a page or component.

First we need to import the new modal component.

import '../modal/editExample';

Next we add a button which will trigger an event. So in the html template where we want to use our modal we add:

<a class="button edit-example">Edit example</a>

And as the last piece of the puzzel we add the action which invokes the modal:

'click .edit-example'(e) {
  e.preventDefault();
  AntiModals.overlay('editExample', {'data': {'example': this}});
}

And thats it. A very simple library for displaying modal popups in meteor.