bootstrap 3 modal in meteor not showing

I'm trying to get a bootstrap 3 modal to pop in a meteor app without any success at all. Everything seems to be in place, I've scoured here and else where and it simply won't work.

The HTML is

<!-- A modal that contains the bigger view of the image selected -->
<template name="projectImageModal">
  <div class="modal fade in show" id="projectImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <p> Hi There</p>
    <div class="modal-dialog">
      <div class="modal-content">
      <p> Hi There again</p>
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Big Image</h4>
        </div>
        <div class="modal-body">
          <img src="{{cfsFileUrl 'bigProjectImage' file=image}}" alt="..." class="img-rounded">
        </div>
      </div>
    </div>
  </div>
</template>

Which is triggered from a click event on an image thumbnail (which is working according to console.log

The code trying to show the dialog is

Template.projectImageItem.events = {
    "click .open-modal" : function(e,t) {
        e.preventDefault();
        Session.set("selectedImageId", t.data._id);
        console.log("Image ID: "+ Session.get("selectedImageId"));          
        //var stuff=$('#projectImageModal');
        //console.log(stuff);
        //stuff.modal('show');
//      $('#projectImageModal').modal().modal("show");
        $("#projectImageModal").modal("show");
        //$('#projectImageModal').modal('show');
        //$('.projectImageModal').modal('show');
    }
};

Which is largely pulled directly from the cfs-file-handler example (which doesn't used bootstrap and calls the modal().modal("show") version to get the modal to pop).

You can see the variations I've tried. The console shows that the event is fired, the selector seems to be working but.. the modal NEVER pops.

Thanks. Peter.

I have tried the code below and it works as expected. If I add show to class="modal fade in" the modal immediately appears. If in your case it doesn't you are probably missing something else that is not shown in the sample code.

HTML

<head>
  <title>modal</title>
</head>

<body>
  {{> projectImageItem}}
  {{> projectImageModal}}
</body>

<!-- A modal that contains the bigger view of the image selected -->
<template name="projectImageModal">
  <div class="modal fade in" id="projectImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Big Image</h4>
        </div>
        <div class="modal-body">
          <img src="{{cfsFileUrl 'bigProjectImage' file=image}}" alt="..." class="img-rounded">
        </div>
      </div>
    </div>
  </div>
</template>

<template name="projectImageItem">
 <input type="button" class="open-modal" value="Show modal." />
</template>

if (Meteor.isClient) {
    Template.projectImageItem.events = {
        "click .open-modal" : function(e,t) {
        e.preventDefault();
        $("#projectImageModal").modal("show");
        }
    };
}