title: Bootstrap modal not closing correctly (modal in modal)
body: <p>I have a bootstrap modal 1 which opens modal 2 on a click.  I close modal 2 by clicking on modal 1.  Modal 1 should then close with a click on the X, which it does but it leaves the main page in a darkened state and I have to refresh to clear it, thats not good!  I have been trying to figure this out for hours and can't get it.  Anyone know what is wrong and how to fix it?  I'm not very experienced at JS or bootstrap for that matter. I got this code from 2 different sources and I am trying to make it work together.
  Code is below... Thanks!</p>
  
  <pre><code>&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" id="portfolioModal1"&gt;
              &lt;div class="gallery" id="myModalD"&gt;
                  &lt;!-- Project Details Go Here --&gt;
                  &lt;ul&gt;
                      &lt;li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"&gt;
                          &lt;img src="img/portfolio/campos/resized/sh21.jpg" class="img-responsive"&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;!--gallery1 end--&gt;
          &lt;/div&gt;
          &lt;div class="modal fade" id="myModalD" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-dialog"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-body"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- /.modal-content --&gt;
              &lt;/div&gt;
              &lt;!-- /.modal-dialog --&gt;
          &lt;/div&gt;
          &lt;!-- /.modal --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--container end--&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-body"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.modal-content --&gt;
      &lt;/div&gt;
      &lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;
  &lt;!-- /.modal --&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt; &lt;i class="fa fa-times"&gt;&lt;/i&gt; Close Project&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Gallery JS</p>
  
  <pre><code>  &lt;!--custom 2nd modal--&gt;
    &lt;script type="text/javascript"&gt;
    $(document).ready(function () {
        $('li img').on('click', function () {
            var src = $(this).attr('src');
            var img = '&lt;img src="' + src + '" class="img-responsive"/&gt;';
            $('#myModalD').modal();
            $('#myModalD').on('shown.bs.modal', function () {
                $('#myModalD .modal-body').html(img);
            });
            $('#myModalD').on('hidden.bs.modal', function () {
                $('#myModalD .modal-body').html('');
            });
        });
    })
    &lt;/script&gt; 
  </code></pre>