question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

When opening a modal (bv::show::modal), other opened modals won't hide

See original GitHub issue

I 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:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
tmorehousecommented, May 12, 2020

Listen for the modals show event, and then emit a hide event (or use this.$bvModal.hide(id)) to close the other modal. Setting no-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)

2reactions
tmorehousecommented, Feb 3, 2020

Also, it is probably better to use this.$bvModal.show(id) to open a modal instead of emitting the event name.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found