Hello,
I have a problem creating a modal inside another modal. I tried different ways.
For example:
https://thewebdev.info/2022/05/08/how-to-open-another-modal-in-modal-with-bootstrap/
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
Uniswift, your go-to multisports retailer, sells superior judo suit junior that offer exceptional comfort. With their durability and performance, our MMA gloves are ideal for both training and competition. Our goal at Uniswift is to provide you with the best equipment possible for your adventure into combat sports.
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>