Bootstrap 3 Modal issues PT 1

As some of you may know , I’ve been working on a new website using the new version of Bootstrap. I had previously been using Bootstrap 2 before switching to Bootstrap 3 and have welcomed the plethora of new features.

Unfortunately I can’t really say that I had a flawless execution of working with it. For quite some time I had been using Zurbs Foundation framework and still prefer it, but I did not want to fall out of practice with Bootstrap.

I switched to using modals to display the data on my portfolio pieces, but had some serious modal issues. By using the modal-toggle and modal-dismiss data values I was able to easily control which modals were active and inactive, however I still had scrolling issues in the background. That is, after having set up the display and loading all my data, I wound up scrolling the document body rather then the modal taking over fullscreen.

I wrote some custom javascript functions to add and remove various classes that fixed the problem with CSS.

Mainly, if you encounter this problem you can solve it by applying overflow:hidden and position:fixed to the document body while the modal is open, but its kind of a hack and requires a bit more work then should be necessary. If you inspect the document while interacting with the modals you’ll notice that Bootstrap applies the class modal-open to the body when a modal is active.

I set the previous fixes to that class, and the trick wound up making sure that it was always applied. A simple matter, except for the fact that nested modals only had limited support and required a little more work to get functioning properly.

It just so happens though that there was a plugin developed to fix that very issue. If you head over to github and look around for bootstrap modal, you’ll find a project that makes sure that the nested support is provided as well as the appropriate CSS. Theres a little bit more CSS required for Bootstrap 3, but its all provided in the documentation.

Truth be told, just including the script in my file solved everything immediately. If you have similar issues to what I had, I would suggest going over to https://github.com/jschr/bootstrap-modal/ and taking a look.

It provides great support for stackable nested modals, fixes the background scrolling issues, allows for backwards compatibility and has its own options for loading and managing data in modals with AJAX.

I only wish I found it sooner.

For those looking, you can find the github repository here:

Bootstrap Modal