<a href="" data-bs-toggle="modal" data-bs-target="#kt_modal_1">Emit1</a>
<div class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered mw-900px">
<div class="modal-content">
<div class="modal-header px-6 py-3">
<h5 class="modal-title">Title</h5>
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-2x">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
</svg>
</span>
</div>
<!--end::Close-->
</div>
<div class="modal-body">
<a href="" data-bs-toggle="modal" data-bs-target="#kt_modal_2">Emit2</a>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" aria-hidden="true">
<!--begin::Modal dialog-->
<div class="modal-dialog modal-dialog-centered mw-650px">
<!--begin::Modal content-->
<div class="modal-content">
<!--begin::Modal header-->
<div class="modal-header pb-0 border-0 justify-content-end">
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Close-->
</div>
<!--begin::Modal header-->
<!--begin::Modal body-->
<div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
<!--begin::Content-->
<div class="text-center mb-13">
<h1 class="mb-3">Lorem ipsum</h1>
</div>
<!--end::Content-->
<!--begin::Search-->
<div data-kt-search-keypress="true" data-kt-search-min-length="2" data-kt-search-enter="enter" data-kt-search-layout="inline">
<!--begin::Form-->
<form data-kt-search-element="form" class="w-100 position-relative mb-5" autocomplete="off">
<!--begin::Hidden input(Added to disable form autocomplete)-->
<input type="hidden" />
<!--end::Hidden input-->
<!--begin::Icon-->
<!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
<span class="svg-icon svg-icon-2 svg-icon-lg-1 svg-icon-gray-500 position-absolute top-50 ms-5 translate-middle-y">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
<path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor" />
</svg>
</span>
<!--end::Svg Icon-->
<!--end::Icon-->
<!--begin::Input-->
<input type="text" class="form-control form-control-lg form-control-solid px-15" name="search" value="" placeholder="Vyhľadávať..." data-kt-search-element="input" />
<!--end::Input-->
<!--begin::Spinner-->
<span class="position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-5" data-kt-search-element="spinner">
<span class="spinner-border h-15px w-15px align-middle text-muted"></span>
</span>
<!--end::Spinner-->
<!--begin::Reset-->
<span class="btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 me-5 d-none" data-kt-search-element="clear">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
<span class="svg-icon svg-icon-2 svg-icon-lg-1 me-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
<!--end::Reset-->
</form>
<!--end::Form-->
</div>
<!--end::Search-->
</div>
<!--end::Modal body-->
</div>
<!--end::Modal content-->
</div>
<!--end::Modal dialog-->
</div>
initModal
global wrapper in src/js/components/app.js
right after initCard()
function: var initModal = function() {
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) {
e.preventDefault();
const modalEl = document.querySelector(this.getAttribute("data-bs-stacked-modal"));
if (modalEl) {
const modal = new bootstrap.Modal(modalEl);
modal.show();
}
});
});
}
}
initModal()
into the global init clause: return {
init: function () {
initLozad();
initSmoothScroll();
initCard();
initModal();
....
}
}
<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</h3>
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-2x">...</span>
</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</h3>
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-2x">...</span>
</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</h3>
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-2x">...</span>
</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>