When opening a modal (bv::show::modal), other opened modals won't hide
See original GitHub issueI encountered a problem with hiding modals on show events.
Let’s imagine we have an opened modal. When I hit the following link (in example), the opened login modal should be immediately closed. But it doesn’t act as described. The remindPassword modal just pops over the opened one.
Am I missing something or what?
Example:
<a @click="$root.$emit('bv::show::modal', 'remindPassword')" href="#">I don't remember my password</a>
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Bootstrap modal hide is not working - Stack Overflow
You are using both modal toggling methods: via Javascript and via data attributes. So your click is firing the modal show as your...
Read more >modal('show') after a modal('hide') doesn't work #3902 - GitHub
The hideModal function sets a flag that it is currently hiding a modal. When it is done it resets the flag. If a...
Read more >Modal - Bootstrap
Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Read more >Bootstrap Modal Position - Visual LightBox
- Modals usage position:fixed , that can possibly sometimes be a little bit particular regarding to its rendering. Any time it is possible,...
Read more >Prevent Page Scrolling When a Modal is Open | CSS-Tricks
That's because modals are elements on a page just like any other. It may stay in place (assuming that's what it's meant to...
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

Listen for the modals
showevent, and then emit a hide event (or usethis.$bvModal.hide(id)) to close the other modal. Settingno-stackingon the first modal will also automatically close the first modal when the second modal opens (as shown in the docs example https://bootstrap-vue.org/docs/components/modal#multiple-modal-support)Also, it is probably better to use
this.$bvModal.show(id)to open a modal instead of emitting the event name.