Modals in Custom Components result in a Black Screen
See original GitHub issueI am not sure if this is a Bootstrap-Limitation or a BootstrapVue-Issue:
I have globally included Bootstrap-Vue so it is working in all custom Components. I added this Code from the Doc to the Custom Component:
<b-button v-b-modal.modal-1>Launch demo modal</b-button>
<b-modal id="modal-1" title="BootstrapVue">
<p class="my-4">Hello from modal!</p>
</b-modal>
Pressing the Button results in a Black Screen and Chrome goes to 100% CPU usage.
As soon as i copy the
<b-modal>
to the end of the Template in App.vue everything works fine. I think i once had this Issue in Vanilla Bootstrap. Though, if i inspect the Code the Modal is injected at the right Place of the DOM !?
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:6 (3 by maintainers)
Top Results From Across the Web
vue.js - After installing bootstrap, modal is a black screen
Im getting used to Vue, but before I installed Bootstrap, my modal worked completely fine. Now it is a black screen.
Read more >Bootstrap Modal Dialog showing under Modal Background
The easiest solution is to move the modal dialog outside of any container and just declare it under the <body> element, or -...
Read more >Tailwind CSS Modal - Flowbite
Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles.
Read more >Tailwind CSS Modal / Dialog - Free Examples & Tutorial
Responsive modal built with Tailwind CSS. Use Modal to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Read more >How to Make a Modal Popup Refresh Items on the Page
In case you do not want to pass any additional props to your modal component, you can call the custom reload() method inside...
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
Nope, it’s not the Backdrop, there is no Opacity on it. The screen is really dark black.
Modal IDs must be unique in the same document.
You can do this with the latest version of Vue: