title: Bootstrap modal is not showing only background is becoming dark
body: <p>I am using handlebar.js to dynamically create a modal and display it.
  Here is my code :-</p>
  
  <pre><code>$("#propertyAdArea .property-box").click(function(){
      var advertisement=adData.advertisments[$(this).data("id")];
      $("#myModal").html("");
      callHandlebars("#myModal","single-ad-display-template",[],advertisement);
      $("#myModal").modal('show');
  })
  </code></pre>
  
  <p>myModal is just an empty div like this :-</p>
  
  <pre><code>&lt;div id="myModal"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here are my embedded js scripts :-</p>
  
  <pre><code>  &lt;script src="/resources/app/js/jquery.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap Core JavaScript --&gt;
      &lt;script src="/resources/app/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Plugin JavaScript --&gt;
      &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"&gt;&lt;/script&gt;
      &lt;script src="/resources/app/js/classie.js"&gt;&lt;/script&gt;
      &lt;script src="/resources/app/js/cbpAnimatedHeader.js"&gt;&lt;/script&gt;
  
      &lt;!-- Contact Form JavaScript --&gt;
      &lt;script src="/resources/app/js/jqBootstrapValidation.js"&gt;&lt;/script&gt;
  
      &lt;!-- Custom Theme JavaScript --&gt;
      &lt;script src="/resources/app/js/freelancer.js"&gt;&lt;/script&gt;
  
      &lt;!--Handle bars--&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>Here are my embedded css files :-</p>
  
  <pre><code>&lt;link href="/resources/app/css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;!-- Custom CSS --&gt;
      &lt;link href="/resources/app/css/freelancer.css" rel="stylesheet"&gt;
  
      &lt;!-- Custom Fonts --&gt;
      &lt;link href="/resources/app/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;
      &lt;link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"&gt;
      &lt;link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css"&gt;
  </code></pre>
  
  <p>Here is the single-ad-display-template :-</p>
  
  <pre><code>  &lt;script id="single-ad-display-template" type="text/x-handlebars-template"&gt;
          &lt;div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="close-modal" data-dismiss="modal"&gt;
                      &lt;div class="lr"&gt;
                          &lt;div class="rl"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-lg-8 col-lg-offset-2"&gt;
                              &lt;div class="modal-body"&gt;
                                  &lt;b&gt;Description&lt;/b&gt; : {{description}} &lt;br/&gt;
                                  &lt;b&gt;Location&lt;/b&gt; : {{location}}&lt;br/&gt;
                                  &lt;b&gt;Address&lt;/b&gt; : {{address}}&lt;br/&gt;
                                  &lt;b&gt;Number Of Rooms&lt;/b&gt; : {{numberOfRooms}}&lt;br/&gt;
                                  &lt;b&gt;Number Of Bedrooms&lt;/b&gt; : {{numberOfBedRooms}}&lt;br/&gt;
                                  &lt;b&gt;Number Of Bathrooms&lt;/b&gt; : {{numberOfBathRooms}}&lt;br/&gt;
                                  &lt;b&gt;Carpet Area&lt;/b&gt; : {{carpetArea}}&lt;br/&gt;
                                  &lt;b&gt;Security&lt;/b&gt; : {{#if security}}&lt;span class="label label-success"&gt;Yes&lt;/span&gt;{{else}}&lt;span class="label"&gt;No&lt;/span&gt;{{/if}}&lt;br/&gt;
                                  &lt;b&gt;Gated Community :&lt;/b&gt; : {{#if gatedCommunity}}&lt;span class="label label-success"&gt;Yes&lt;/span&gt;{{else}}&lt;span class="label"&gt;No&lt;/span&gt;{{/if}}&lt;br/&gt;
                                  &lt;b&gt;Club House&lt;/b&gt; : {{#if clubHouse}}&lt;span class="label label-success"&gt;Yes&lt;/span&gt;{{else}}&lt;span class="label"&gt;No&lt;/span&gt;{{/if}}&lt;br/&gt;
                                  &lt;b&gt;Gym&lt;/b&gt; : {{#if gym}}&lt;span class="label label-success"&gt;Yes&lt;/span&gt;{{else}}&lt;span class="label"&gt;No&lt;/span&gt;{{/if}}&lt;br/&gt;
                                  &lt;b&gt;Swimming Pool&lt;/b&gt; : {{#if swimmingPool}}&lt;span class="label label-success"&gt;Yes&lt;/span&gt;{{else}}&lt;span class="label"&gt;No&lt;/span&gt;{{/if}}&lt;br/&gt;
                                  &lt;b&gt;Additional Facilities &lt;/b&gt;: {{additionalFacilities}}&lt;br/&gt;
                                  &lt;b&gt;Type Of Property &lt;/b&gt; : {{typeOfProperty}}&lt;br/&gt;
                                  &lt;b&gt;Number Of Floors &lt;/b&gt; : {{numberOfFloors}}&lt;br/&gt;
                                  &lt;b&gt;Floor Number &lt;/b&gt; : {{floorNo}}&lt;br/&gt;
                                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt; Close&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>I am using the following theme :-</p>
  
  <p><a href="http://ironsummitmedia.github.io/startbootstrap-freelancer/" rel="nofollow">http://ironsummitmedia.github.io/startbootstrap-freelancer/</a></p>
  
  <p>Here is the html that is generated :-</p>
  
  <pre><code>&lt;div id="myModal" class="in" aria-hidden="false" style="padding-right: 17px;"&gt;
          &lt;div class="portfolio-modal modal fade" tabindex="-1" role="dialog" aria-hidden="true"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="close-modal" data-dismiss="modal"&gt;
                      &lt;div class="lr"&gt;
                          &lt;div class="rl"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-lg-8 col-lg-offset-2"&gt;
                              &lt;div class="modal-body"&gt;
                                  &lt;b&gt;Description&lt;/b&gt; :  &lt;br&gt;
                                  &lt;b&gt;Location&lt;/b&gt; : &lt;br&gt;
                                  &lt;b&gt;Address&lt;/b&gt; : &lt;br&gt;
                                  &lt;b&gt;Number Of Rooms&lt;/b&gt; : &lt;br&gt;
                                  &lt;b&gt;Number Of Bedrooms&lt;/b&gt; : &lt;br&gt;
                                  &lt;b&gt;Number Of Bathrooms&lt;/b&gt; : &lt;br&gt;
                                  &lt;b&gt;Carpet Area&lt;/b&gt; : &lt;br&gt;
                                  &lt;b&gt;Security&lt;/b&gt; : &lt;span class="label"&gt;No&lt;/span&gt;&lt;br&gt;
                                  &lt;b&gt;Gated Community :&lt;/b&gt; : &lt;span class="label"&gt;No&lt;/span&gt;&lt;br&gt;
                                  &lt;b&gt;Club House&lt;/b&gt; : &lt;span class="label"&gt;No&lt;/span&gt;&lt;br&gt;
                                  &lt;b&gt;Gym&lt;/b&gt; : &lt;span class="label"&gt;No&lt;/span&gt;&lt;br&gt;
                                  &lt;b&gt;Swimming Pool&lt;/b&gt; : &lt;span class="label"&gt;No&lt;/span&gt;&lt;br&gt;
                                  &lt;b&gt;Additional Facilities &lt;/b&gt;: &lt;br&gt;
                                  &lt;b&gt;Type Of Property &lt;/b&gt; : &lt;br&gt;
                                  &lt;b&gt;Number Of Floors &lt;/b&gt; : &lt;br&gt;
                                  &lt;b&gt;Floor Number &lt;/b&gt; : &lt;br&gt;
                                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt; Close&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>What is the problem ?</p>