Bootstrap modal toggle between two scrolling issue

Question

I have the following piece of javascript that switches between two bootstrap modals.

However, when the second modal appears, the Bootstrap class "modal-open" that gets attached to the body class when a modal is opened is not being added onto the second modal. And so the modal background then scrolls instead of the modal itself.

The fix I need to do is to add the class of "modal-open" to the body tag when the second #priorityModal is opened.

Can someone tell me how to add it to the below code?

function showDialog2() {
  $("#developmentModal").modal("hide");
  $("#priorityModal").modal("show");
}

$("#toggledevelopmentModal").on("click", function () {
  showDialog2();
});

It should be added automatically when you call `.modal("show")`. Where are your modals located in DOM? — Rehban Khatri, Apr 21 '17 at 16:29
Try adding them inside body. I came accross this example http://codepen.io/alvaram/pen/luotA . Have a look — Rehban Khatri, Apr 21 '17 at 17:14

score 1 · Answer 1 · edited Nov 22 '18 at 12:40

1

I think this question may have the answer.

The removal of modal-open seems to be done in an event that fires after the "show" is done. So putting it back on may need to be done in a handler on the hidden.bs.modal event. (That's how I got it working best in my own website.)

edited Nov 22 '18 at 12:40

Eric Aya

69,473
35
181
253

answered Nov 22 '18 at 12:37

superguppie

106
7

score 0 · Answer 2 · answered Apr 21 '17 at 16:30

0

You have to open a new popup only after previous one is closed.

var developmentModal = $("#developmentModal"),
    priorityModal = $("#priorityModal");

function showDialog2() {    
    developmentModal.on('hidden.bs.modal', function () {
        priorityModal.modal("show")
    });
    developmentModal.modal("hide");
}

That should be fine

answered Apr 21 '17 at 16:30

Артём Прудников

21
2

Nothing happens at all unfortunately when i tried this. The first modal doesn't close, and the second doesn't open – mention79 Apr 21 '17 at 16:34
This was the right idea, I just made it more robust in my example below (possibly now above). – Matt Jun 05 '20 at 19:55

Matt · Answer 3 · 2020-06-05T19:52:19.167

As documented... Bootstrap 4 Modal Events

And here's what I did...

<div id="firstModal" class="modal fade">
    <a
        id="firstModalToSecondModalLink"
        data-target="secondModal"
        class="switch-modal-link"
        href="#"
    >Switch to Modal 2</a>
    <a
        id="firstModalToThirdModalLink"
        data-target="thirdModal"
        class="switch-modal-link"
        href="#"
    >Switch to Modal 3</a>
</div>

<script>
    var next_modal = false;
    $('.switch-modal-link').click(function(e) {
        e.preventDefault();
        next_modal = $('#'+$(this).attr('data-target'));
        $(this)
            .closest('.modal')
            .modal('hide')
            .on(
                'hidden.bs.modal',
                function() {
                    if(next_modal) {
                        next_modal.modal({
                            show: true
                        });
                        next_modal = false;
                    }
                }
            );
    });
</script>

Bootstrap modal toggle between two scrolling issue

3 Answers3