I am implementing a custom modal using bootstrap-vue modal in my project on codesandbox.
This is the template structure:
<template>
<b-button variant="link" class="btn-remove" @click="removeItemFromOrder(index)">
Remove item
</b-button>
</template>
The script responsible for generating the custom modal content:
<script>
export default {
name: "HelloWorld",
methods: {
removeItemFromOrder: async function (position) {
let self = this
const h = this.$createElement
const titleVNode = h('div', { domProps: { innerHTML: '<h2>Remove this item?</h2>' } })
const messageVNode = h('div', { class: ['modal-complete'] }, [
h('div', {
domProps: {
innerHTML: '<h2>Remove this item?</h2>'+
'<span class="popup-meta">'+
'Are you sure you want to remove this item?'+
'</span>'
}
})
])
// Code for displaying and handling the modal goes here...
},
}
};
</script>
The bootstrap modal now appends to the body after opening. My question is, how can I append the bootstrap-vue modal to #app or another specific element?
P.S: This customization only applies to this.$bvModal.msgBoxConfirm with then. I want to avoid creating unnecessary methods due to the variety of popups with different logic.