Multiple modale on the same page in a programmatic way
See original GitHub issueHello,
I’m trying to have one modale per row on a talbe. I found #1424 but it’s not working in my case.
On each row on my table, I got a component that renders a modale:
<confirmation-modale
:id="'team_' + row.item.id"
...
:action-route="generateDetachRoute(row.item.id)">
</confirmation-modale>
// inside the confirmation-modale
<button :v-b-modal="id" :class="finalClass">{{ btnLabel }}</button>
<b-modal
:id="id"
ref="confirmationModaleRef"
:title="trans('confirmation')"
:ok-title="trans('submit')"
no-close-on-backdrop
hide-header-close
:visible="showModal"
>
...
It’s either I don’t have this code, and all the modale opens when I click on one button, and with this code shared, no modale opens. What am I missing please ?
Also, I close this modale programatically, so do I need to customize the ref
prop to make it unique so It only close 1 modale or not? this.$refs.<variable>.hide()
?
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:10 (6 by maintainers)
Top Results From Across the Web
Creating Multiple Modals on a Single Page - Stack Overflow
In the below example I use two modals, but you can use more. You just set the id in the modal class elements...
Read more >Handling Multiple Modals on One Page with Vanilla JS
Handling Multiple Modals on One Page with Vanilla JS. Here is a little JS snippet for opening and closing multiple modals on a...
Read more >multiple modal on same page, each modal with his own button
how can i setting to use multiple modal, each button open his own modal with dynamic content??
Read more >Create Multiple Modals on web page using single JavaScript.
In this video, you will know how to create multiple modal using a single code of javascript.#CB Tech , #Programming.
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 >
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
That issues is probably due to the
z-inzex
values, and the fact that your modal is inside the table cells.And I just notices that you are also using the
visible
prop when also using thev-modal
directive.If all of your modals are tied to the same value of
visible
, you will run into issues.