How to show Modal over a Modal at the same time

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?

[evgenyvas]

This works for me template:

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

js:

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.contains(evt.relatedTarget)
            ) {
                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) {
                return
            }
            const showEvt = new BvEvent('show', {
                cancelable: true,
                vueTarget: this,
                target: this.$refs.modal,
                relatedTarget: null
            })
            this.emitEvent(showEvt)
            if (showEvt.defaultPrevented || this.is_visible) {
                // Don't show if canceled
                return
            }
            this.doShow()
        }
        this.$root.$refs.modalAdd.show = show.bind(this.$root.$refs.modalAdd)
    },
    methods: {
        modalAddHidden() {
            if (this.modalShow) {
                const vueModal = this.$root.$refs.modal
                vueModal.onBeforeEnter()
                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') {
                        return
                    }
                    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
                    })
                    vueModal.emitEvent(shownEvt)
                })
            }
        }
    }
});

https://codepen.io/anon/pen/PyNdGE

[rut2]

@580 I think it not possible in bootstrap-vue. you can use Vue Modal : https://vuejs.org/v2/examples/modal.html