Bootstrap modal not closing correctly (modal in modal)

Question

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!

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container" id="portfolioModal1">
            <div class="gallery" id="myModalD">
                <!-- Project Details Go Here -->
                <ul>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img src="img/portfolio/campos/resized/sh21.jpg" class="img-responsive">
                    </li>
                </ul>
            </div>
            <!--gallery1 end-->
        </div>
        <div class="modal fade" id="myModalD" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body"></div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </div>
</div>
<!--container end-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body"></div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</div>
<button type="button" class="btn btn-primary" data-dismiss="modal"> <i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>

Gallery JS

  <!--custom 2nd modal-->
  <script type="text/javascript">
  $(document).ready(function () {
      $('li img').on('click', function () {
          var src = $(this).attr('src');
          var img = '<img src="' + src + '" class="img-responsive"/>';
          $('#myModalD').modal();
          $('#myModalD').on('shown.bs.modal', function () {
              $('#myModalD .modal-body').html(img);
          });
          $('#myModalD').on('hidden.bs.modal', function () {
              $('#myModalD .modal-body').html('');
          });
      });
  })
  </script> 

Answer 1

The problem is not with the modals, you have repeating two id's and what causing the problem is that you are repeating modal id's in HTML, Id's must be UNIQUE through out the document.

First Modal id="portfolioModal1"

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">

and repeating first modal id="portfolioModal1" again inside modal HTML

<div class="container" id="portfolioModal1">

Then after above HTML code, you are again repeating id="myModalD"

<div class="gallery" id="myModalD">

which is basically the id of 2nd modal id="myModalD"

<div class="modal fade" id="myModalD" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">

These repeating modal id's causing modal-backdrop not disappear when modal closed.

remove these 2 unnecessary id's

id="portfolioModal1" from <div class="container" id="portfolioModal1">

and

id="myModalD" from <div class="gallery" id="myModalD">

and modals work fine, on closing modals, backdrop will disappear.

In JS code;

If you want to manually opens a modal, then

$('#myModalD').modal('show');

not just $('#myModalD').modal(), no doubt it will work but not all browsers are very forgiving or ignoring.

and you can add modal event listener like this too, it's better practice.

$('#myModalD').modal('show').on('shown.bs.modal', function () {
            $('#myModalD .modal-body').html(img);
});

instead

$('#myModalD').modal("show");
$('#myModalD').on('shown.bs.modal', function () {
      $('#myModalD .modal-body').html(img);
});

Working Example

$(document).ready(function () {
    $('li img').on('click', function () {
        var src = $(this).attr('src');
        var img = '<img src="' + src + '" class="img-responsive"/>';
        $('#myModalD').modal("show").on('shown.bs.modal', function () {
            $('#myModalD .modal-body').html(img);
        });
        $('#myModalD').on('hidden.bs.modal', function () {
            $('#myModalD .modal-body').html('');
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#portfolioModal1">Open Modal</button>
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
            <div class="gallery">
                <!-- Project Details Go Here -->
                <ul>
                    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                        <img src="http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png" class="img-responsive">
                    </li>
                </ul>
            </div>
            <!--gallery1 end-->
        </div>
        <div class="modal fade" id="myModalD" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body"></div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </div>
</div>
<!--container end-->

Fiddle Working Example