The New Way to Build!
Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More
Metronic 8 Vue Modal inside Modal
Hello,
I have a problem creating a modal inside another modal. I tried different ways.
For example:
and
https://devs.keenthemes.com/question/metronic-8-modal-inside-modal
and in the doc
https://preview.keenthemes.com/metronic8/vue/docs/base/modal#stacked
- Every time I try to open the second modal, the first one closes. (The problem will be Metronic 8.1.8. It works on pure bootstrap 5.)
Thanks
Replies (1)
Hi,
Sorry for the late reply.
The example in our docs isn't correct, we will update this example in upcoming releases.
For now, could you please try the example below?
<template>
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#kt_modal_stacked_1"
>
Launch demo modal
</button>
<div class="modal fade" tabindex="-1" >
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Modal title
<!--begin::Close-->
<div
class="btn btn-icon btn-sm btn-active-light-primary ms-2"
data-bs-dismiss="modal"
aria-label="Close"
>
<i class="ki-duotone ki-cross fs-1"
><span class="path1"></span><span class="path2"></span
></i>
</div>
<!--end::Close-->
</div>
<div class="modal-body">
...
<button
type="button"
class="btn btn-primary"
data-bs-stacked-modal="#kt_modal_stacked_2"
>
Launch stacked modal
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" >
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Stacked modal title
<!--begin::Close-->
<div
class="btn btn-icon btn-sm btn-active-light-primary ms-2"
data-bs-dismiss="modal"
aria-label="Close"
>
<i class="ki-duotone ki-cross fs-1"
><span class="path1"></span><span class="path2"></span
></i>
</div>
<!--end::Close-->
</div>
<div class="modal-body">
...
<button
type="button"
class="btn btn-primary"
data-bs-stacked-modal="#kt_modal_stacked_3"
>
Launch stacked modal
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div
class="modal fade"
tabindex="-1"
data-bs-backdrop="static"
>
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Stacked modal title
<!--begin::Close-->
<div
class="btn btn-icon btn-sm btn-active-light-primary ms-2"
data-bs-dismiss="modal"
aria-label="Close"
>
<i class="ki-duotone ki-cross fs-1"
><span class="path1"></span><span class="path2"></span
></i>
</div>
<!--end::Close-->
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { Modal } from "bootstrap";
export default defineComponent({
setup() {
onMounted(() => {
var elements = Array.prototype.slice.call(
document.querySelectorAll("[data-bs-stacked-modal]")
);
if (elements && elements.length > 0) {
elements.forEach((element) => {
if (element.getAttribute("data-kt-initialized") === "1") {
return;
}
element.setAttribute("data-kt-initialized", "1");
element.addEventListener("click", function (e: Event) {
e.preventDefault();
const modalEl = document.querySelector(
element.getAttribute("data-bs-stacked-modal")
);
if (modalEl) {
const modal = new Modal(modalEl);
modal.show();
}
});
});
}
});
},
});
</script>Please let us know if you have any further questions on this topic or anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
