7

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>
Shehary
  • 9,926
  • 10
  • 42
  • 71
Barbara
  • 73
  • 1
  • 1
  • 5

3 Answers3

7

I was also facing the same issue, Bootstrap modal box not closing properly. The problem is with the 'fade' animation of modal box.

In 

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

Remove fade from modal class

jagadish sivakumar
  • 71
  • 1
  • 3
5

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

Shehary
  • 9,926
  • 10
  • 42
  • 71
  • Sorry, never finished my comment! 1)When the modal comes up there is no shadow around it, so it doesn't look right, not quite sure why that is happening. 2) I have 5 more of the same modal with different categories of images that I need to make work. Of course when I try to add them in it has the same overlay problem as before because the id's are the same. So I give it an individual id, but then the js needs to be updated, a bit above my level! So right now, the id's are the same on the site ( http://www.campos-schug.com) Check out it's functionality there. Can you help ? – Barbara Oct 21 '15 at 15:19
  • i will look into it and will revert back – Shehary Oct 21 '15 at 15:25
  • you are missing `
    ` in modal, before `
    `, put `
    ` before `
    ` and it will resolve the 1st problem of no shadow
     – Shehary Oct 21 '15 at 16:16
  • I added it and now the images are extending off the modal. – Barbara Oct 21 '15 at 18:49
  • is this what you are looking for http://shehary.com/stackoverflow/multiplemodals.html – Shehary Oct 22 '15 at 07:56
  • Exactly! So, each modal opens with its own id, and only 1 instance of the closing modalD code? I see you added another Class and a line of js, I'm not sure how this is working, but it looks beautiful, exactly what I'm looking for! – Barbara Oct 22 '15 at 15:17
  • I will add detail later in answer but you can copy the code from source of above page, what I did was you have modals inside modals so I removed all 2nd modals, each portfolio item has its own modal with unique id and to load the items then I just add one more modal which is at the bottom of page (this modal should come after all portfolio modals otherwise you will have z-index problem and 2nd modal will open behind first modal) then I added `$('body').addClass('modal-open');` when 2nd modal close so first modal will able be scroll otherwise it will stuck, this simple – Shehary Oct 22 '15 at 15:32
  • side note, you have so many unnecessary `` tags after each portfolio modal, if i count more then 10, remove those and remove all 2nd modals from portfolio modals and you have one more issue which is in first couple of portfolio modals you have `

    ` after `
    ` and then later either you forget to put `
    ` or `

    ` coming before `
    ` have look at that too and this `.modal-open .modal {padding-left: 0px !important;}` will fix the issue where first modal push right `17px` when open

     – Shehary Oct 22 '15 at 15:38
  • This is my first time using bootstrap, i saw all those divs too and found it very confusing but you @Shehary made it easy and clear! I have a better understanding now. thank you! – Barbara Oct 22 '15 at 15:56
  • Glad I was able to help and again you are most welcome, don't forget to mark the answer right and possible upvote and don't hesitate if you need any help or have any questions. – Shehary Oct 22 '15 at 16:43
0

Try including bs in "data-bs-dismiss"

<div class="modal-footer">
 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
 <button type="submit" name="deletedata" class="btn btn-primary">Yes, Delete</button>
</div>

See details here: https://getbootstrap.com/docs/5.0/components/modal/

skplunkerin
  • 2,123
  • 5
  • 28
  • 40
Michael Adenson
  • 11