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

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 2

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/