Modal backdrop is not getting the .show and .fade classes applied
See original GitHub issueDescribe the bug
Modal backdrop is opaque because it is not getting the .show
and .fade
classed applied
Steps to reproduce the bug
- Create a modal assigned to a button using its id
- Click on the button
- See Error
Expected behavior
Backdrop to be transparent
Versions
Libraries:
- BootstrapVue: 2.0.0-rc.22
- Bootstrap: 4.2.1
- Vue: 2.6.8
Issue Analytics
- State:
- Created 4 years ago
- Comments:9 (4 by maintainers)
Top Results From Across the Web
Bootstrap modal appearing under background - Stack Overflow
Basically, the original backdrop is not used. Instead you use the modal as the backdrop. The result is that it looks and behaves...
Read more >Modal - Bootstrap
Modals are built with HTML, CSS, and JavaScript. · Clicking on the modal “backdrop” will automatically close the modal. · Bootstrap only supports...
Read more >Bootstrap Modal Dialog showing under Modal Background
This setup works because there's no top level container above the modal that introduces it's own positioning root. Problem solved, right?
Read more >Modal Options - W3Schools Tryit Editor
The backdrop option specifies whether the modal should have a dark overlay (the background color of the current page) or not. Modal with...
Read more >Modal-backdrop doesn't disappear [#3018531] | Drupal.org
1) Please remove ".fade" class from modal wrapper, because of animation it's not removed all backdrop. https://getbootstrap.com/docs/3.3/ ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
In docs, the backdrop is transparent:
See answer at https://github.com/bootstrap-vue/bootstrap-vue/issues/3400#issuecomment-498278454
Since we are using new re-usable transitions (to reduce codebase size), and Bootstrap V4.x transition styles are not truly compatible with how Vue handles transitions, not without a lot of extra JS hooks on the transition (see issue https://github.com/vuejs/vue/issues/9986) just to keep the
show
class on the element when the initial transition happens.The
fade
andshow
classes are only applied during the transition (fade
is applied on transitionv-enter-active
andv-leave-active
, andshow
onv-enter-to
andv-leave
… see https://vuejs.org/v2/guide/transitions.html#Transition-ClassesAlso, please upgrade Bootstrap to V4.3.1 for the latest CSS. and make sure you are loading BootstrapVue CSS after Bootstrap V4.3.1 CSS
We’e simplified the SCSS from above to:
The
.modal
has issues due to two transitions happening as the same time with two different durations: the fade transition, and the transform transition that slides the modal down… which has a longer duration. Using a single transition component would cause the slide down transition to abruptly stop once the fade transition ends. We hae tried to merge the transitions into a single transition but it just doesn’t work with Bootstrap’s SCSS/CSS.The code needed to keep the
show
class active after the initial transition involves keeping data state of the transition stages, adding inrequestAnimationFrame
timeouts to add/remove theshow
class, and exit handlers to detect when theshow
class needs to be removed (as long as the transition isn’t cancelled). It is a lot more than just one or two lines of code (I know, I wrote a good chunk of the original code). Now double that due to the.modal
having one (well two transitions), and the.modal-backdrop
having a transition (which could be a different duration that modal’s fade, as they are separately configurable with SCSS variables).modal fade show d-block
was more of a hack / bandaid fix to get modal working, than using the above one line of SCSS to simplify the modal backdrop transition.Also note, the backdrop and modal are not nested inside a same transitional component. they are two distinct entities, with possibly two distinct transition durations. Vue’s transition handler can only pick out the transition duration on the root element in the transition, not nested elements (which the modal slide transition is).