One post tagged with "bootstap"

One small issue I faced while I was working on my portfolio website, was that I wanted the project modal to be able to open each other. For example. I wanted the portal modal to be able to reference all the other applications and API modals that it’s linked to. The problem was a little compound.

do I want to close the current modal before opening the other modal? Or do I want to stack the modals on top of each other?

Approach 1​

What I first found as a solution was to make use of the two tags that bootstrap offers for modals data-dismiss="modal" and data-toggle=“modal”.

<a href="#" data-dismiss="modal" data-toggle="modal">This is the link to the other modal</a>

This worked fine. It closes the portal modal and opens the next modal. BUT for some reason, the second modal wouldn’t scroll. And since the modal background was a little transparent, I could see the page behind the modal scrolling 🤔

Approach 2​

Another fast an easy solution was to use JQuery to toggle the modal.

<a id="modalTogglerBtn">This is the link to the other modal</a>

$("modalTogglerBtn").on("click", function(){
    $('#myModal').modal('toggle');
});

This did the trick. Not really. The new modal would open and it would scroll. So what was the problem? As I close the modal on top of the stack. The same problem of not being able to scroll on the modal would happen to the first modal.(The one down the stack).

Here’s the problem then, something with the modal messes the scrolling up and transfer it from the modals back to the body.

Approach 3 (The Solution) 🎉​

So here’s what I found out. Bootstrap, upon the creation, adds a modal-open class to the body tag. This class is what causes the scrolling behavior to be focused in the modals rather than the body itself. As we would close the top modal, bootstrap would remove that class from the body tag. That's why neither of the first approaches worked. So we need a why or a mechanism to check for open modals first before removing that tag.

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

The hidden.bs.modal is invoked when the modal is fully hidden (after CSS transitions have completed) Ref.JavaScript · Bootstrap . Modal Events