Bootstrap modal doesn't appear in Meteor

Question

I'm trying to get Bootsrap's modal to work but when I click on the button all I get is a black screen, no modal dialog box appears as I expect it to. I'm using meteor.

Here's the code I have:

<div class="container">
    <h2>Example of creating Modals with Twitter Bootstrap</h2>
    <div class="modal hide fade in" id="example" style="display: none; ">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>This is a Modal Heading</h3>
        </div>
        <div class="modal-body">
            <h4>Text in a modal</h4>
            <p>You can add some text here.</p>
        </div>
        <div class="modal-footer">
            <a class="btn btn-success" href="#">Call to action</a>
            <a class="btn" data-dismiss="modal" href="#">Close</a>
        </div>
    </div>
    <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch
        demo modal</a></p>
</div>

I've essentially obtained the code from: http://www.w3resource.com/twitter-bootstrap/modals-tutorial.php for testing purposes.

Answer 1

Here's an example app which shows how to display a bootstrap modal with Meteor:

• https://github.com/alanning/meteor-modal-example

You can see a live version in action here:

• http://modal-example.meteor.com/

Answer 2

I had a similar issue. The problem is a fundamental difference in how Meteor and Bootstrap work. Meteor assumes that markup can be reloaded at any time. If any live variables change, Meteor just reloads the template. Bootstrap on the other hand assumes that the template will only be loaded once, and them modified with javascript at runtime.

What is happening is meteor is loading my modal template. At some point I'm clicking on something, which causes that modal to appear in javascript. However, a split second later, a live variable changes which causes the template to load again. Since the template has the modal hidden, it overrides the javascript that was just trying to show the template.

I solved this by putting the inside of the modal in a different template than the outside. The outer template doesn't respond to any live variables, so it will hopefully never be reloaded.

Before:

<template name="modal">      
  <div class="modal hide fade in" id="settings-modal" data-backdrop="false">
    <div class="modal-header">
    ...
</template>

After:

<template name="modal">      
  <div class="modal hide fade in" id="settings-modal" data-backdrop="false">
    {{> modalInner}}
  </div>
</template>      

<template name="modalInner">
  <div class="modal-header">
    ...
</template>

Answer 3

I was experiencing the same issue. I removed the 'hide' class from the modal and it worked after that. I also had to include the modal in the same template with the link that activates it.

Instead of

<div class="modal hide fade in" id="example" style="display: none; ">

Try this

<div class="modal fade" id="example" style="display: none;">

Answer 4

I have figured out a decent solution -- my Modal is it's own template and a session variable controls if it gets displayed. After it is "rendered" I trigger bootstrap's JS to "open" it.

...
{{#if getSession 'isRegisterConfirmation'}}
  {{> registerConfirm}}
{{/if}}
</template>

<template name="registerConfirm">
<div class="modal registerConfirmModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Confirm Name / Info</h3>
  </div>
  <div class="modal-body">
    You are registering as
    ...

The tricky part was tying events between Meteor and Bootstrap.

• On Meteor render -> trigger Bootstrap Modal show
• On Bootstrap Modal hide -> clear session variable from Meteor

This actually works out very well, here's a simplified version of what I've got going on...

Template.registerConfirm.rendered = function() {
  var thing = Session.get('thingToConfirm');
  $('.registerConfirmModal').on('hidden', function() {
    Session.set('thingToConfirm', '');
    Session.set('isRegisterConfirmation', false);
  });
  $('.registerConfirmModal').on('shown', function() {
    $('.registerConfirmModal button.confirm').focus();
  });
  $('.registerConfirmModal').modal('show');
};

Then triggering the modal is as simple as setting the session variable to true.... all the rest of the interchange is based on events.