[Solved] Issue to display modal with bootstrap 3



I’m using bootstrap.
I’m facing a very beginner issue at displaying a modal.

Here is my code, I cannot see what i missed, what is wrong ?

So Here is my template with the button to call the modal

<template name="allCars">
	{{#each cars}}
	<div class= 'car'>
		<h3>{{carname}}</h3> <br>
			{{#each passengers theCar._id}} <!-- Call passengers helper and put the id of the current car in parameter and then display all the names of users linked to this car -->
		<button class="btn btn-primary" id="add">modal</button>

Here is he template of my modal

Template name="modalAddUserToCar">

    <div class="modal fade">
       <div class="modal-dialog modal-sm">
         <div class="modal-content">



and here is my events

//CLicking the button will show a modal
	'click add': function(e){

Thanks in advance for any help


which html element should this match? I dont see any
there is no such class nor id


It refer directly to the name of the template. I thought that it would worked like this, how should I do ?
Giving an Id to my modal class ?


there is package for showing modals :smiley:


Thanks a lot, I installed peppelg:bootstrap-3-modal and…
It works just great now !


You can also use bootboxjs:

and here is a snippet to load a template inside:


None of the replies above point out the initial problem and instead suggest packages Which is fine and it looks like you’ve found a solution but I thought i’d explain why your initial approach didnt work.


Won’t ever work because its not a valid jquery selector.

You can’t refer to templates this way. Templates aren’t included in the DOM until they are used.

For a modal to be used, you need to include it in the dom. In your case somewhere in another used template or something else manualy, like the Blaze.render… methods etc. Bellow I show how to just include it.


And then you have to be able to find it with a valid jquery selector. Either by ID or Class or something more complicated for example if we changed the modal template above to be:

<template name="modalAddUserToCar">
    <div class="modal fade" id="modal1">
       <div class="modal-dialog modal-sm">
         <div class="modal-content">



We give it a HTML id of “modal1”

Then you could show the modal with:


Ultimately the packages are probably better as managing modals manually but sometimes doing the background research might help out later.


@ahref Even better, thanks for the explanation it helps a lot, it works great !


@ahref just one more question with your method how do I do to hide the modal, from a button that is in the modal ?


Once again I suggest you use a modal package to manage these but.


will work.

I sugesst you read through the documentation at: http://getbootstrap.com/

Good luck.