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 FreeTop 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
Top GitHub Comments
Listen for the modals
show
event, and then emit a hide event (or usethis.$bvModal.hide(id)
) to close the other modal. Settingno-stacking
on 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.