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.

How to show Modal over a Modal at the same time

See original GitHub issue

bootstrap-vue is explicitly checking if any modal is open before opening any modal. If it’s found already one open modal then it closes first and then triggers secondary modal to show.

How can I show both modals at the same time?

I am having the requirement to open modal over a modal. For that, I have defined two b-modal with modal and subModal ref respectively.

But when I open subModal from modal, it hides the first modal and then opens subModal. Is there any way I can change that behavior and show both modals at the same time?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:3
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

evgenyvascommented, Oct 4, 2018

This works for me template:

<div id="app">
    <b-button @click="modalShow = !modalShow">
      Open Modal
    <b-modal ref="modal" id="modal" v-model="modalShow" size="lg" :centered="true">
        main modal
        <b-button @click="modalAddShow = !modalAddShow">
           Open Additional Modal
    <b-modal ref="modalAdd" id="modal-add" v-model="modalAddShow" size="md" :centered="true" @hidden="modalAddHidden">
         additional modal


import BvEvent from 'bootstrap-vue/src/utils/bv-event.class'

var app = new Vue({
    el: "#app",
    data: {
        modalShow: false,
        modalAddShow: false,
    mounted() {
        let self = this

        // emit event only for additional modal and not for main modal
        let emitEvent = function(bvEvt) {
            const type = bvEvt.type
            this.$emit(type, bvEvt)
        this.$root.$refs.modalAdd.emitEvent = emitEvent.bind(this.$root.$refs.modalAdd)
        // not need to set focus on main modal if additional modal is open
        let onFocusout = function(evt) {
            // If focus leaves modal, bring it back
            // 'focusout' Event Listener bound on content
            const content = this.$refs.content
            if (
                !self.modalAddShow &&
                !this.noEnforceFocus &&
                this.is_visible &&
                content &&
            ) {
                content.focus({preventScroll: true})
        this.$root.$refs.modal.onFocusout = onFocusout.bind(this.$root.$refs.modal)

        // replace show function for additional modal
        let show = function() {
            if (this.is_visible) {
            const showEvt = new BvEvent('show', {
                cancelable: true,
                vueTarget: this,
                target: this.$refs.modal,
                relatedTarget: null
            if (showEvt.defaultPrevented || this.is_visible) {
                // Don't show if canceled
        this.$root.$ = show.bind(this.$root.$refs.modalAdd)
    methods: {
        modalAddHidden() {
            if (this.modalShow) {
                const vueModal = this.$root.$refs.modal
                vueModal.is_block = true
                vueModal.is_show = true
                vueModal.is_transitioning = false
                vueModal.$nextTick(() => {
                    // Don't try and focus if we are SSR
                    if (typeof document === 'undefined') {
                    const content = vueModal.$refs.content
                    const modal = vueModal.$refs.modal
                    const activeElement = document.activeElement
                    if (activeElement && content && content.contains(activeElement)) {
                        // If activeElement is child of content, no need to change focus
                    } else if (content) {
                        // Focus the modal content wrapper
                        content.focus({preventScroll: true})
                    const shownEvt = new BvEvent('shown', {
                        cancelable: false,
                        vueTarget: vueModal,
                        target: modal,
                        relatedTarget: null

rut2commented, Apr 4, 2018

@580 I think it not possible in bootstrap-vue. you can use Vue Modal :

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bootstrap: Open Another Modal in Modal - Stack Overflow
A potential issue in this case is that the backdrop from the 2nd modal hides the 1st modal. To prevent this, make the...
Read more >
Is it acceptable to open a modal popup on top of another ...
So in my opinion, closing one modal to view another modal should be avoided in the first place. For any technical reason, if...
Read more >
How to create multiple modals (Open modal popup ... - YouTube
Hi friends,In this video you will learn how to create Nested Modal Popup Box using Bootstrap5.
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 >
Managing Multiple Bootstrap Modals - Arroyo Labs
There are two modals currently present which are creatively named ModalOne and ModalTwo. The view of each modal will alternate at a specified...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found