Modal is not open in HTML
Hi All, I try to open Modal in html and I follow this documentation https://preview.keenthemes.com/html/metronic/docs/base/modal but it is not open,
<a class="menu-link px-5" data-bs-toggle="modal" data-bs-target="#ChangePasswordModal">
<span class="menu-bullet">
<i class="menu-title ki-duotone ki-key fs-5">
<i class="path1"></i>
<i class="path2"></i>
</i>
</span>
<span class="menu-title">@Change_Password2</span>
</a>
<div class="modal fade" tabindex="-1" id="ChangePasswordModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">@Change_Password
<!--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">
Modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
<button type="submit" id="btnsubmit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>what I should do??
Thank you
Replies (5)
Hi,
Can you double-check if your page has any js error that prevents the core components from functioning?
Also please make sure that the ID of the modal you pass to the toggle element is correct.
If you need any further help please provide us with your test URL online or provide your HTML source code via gist.github.com and a screenshot of your browser console via https://imgur.com.
Regards.
Hi Sean, thank you for your response, but when I double-check I didn't have any js error, and I sure from ID name,,
How can open model from new HTML page by js?,, can provide me any tutorial to guide me, I still pending in this error from two months ,, I am waiting for your support,
Hi again,, I checked again where the issue exactly, and I notice if add modal outside "menu menu-sub menu-sub-dropdown", it is working, but when add modal inside menu is not working ?? ,, I am trying to find solution , what I should do ??
Hi,
The Modal's can not be added inside the KTMenu nodes. You should place your modal outside the KTMenu, just in the root level of your page and call it from any element. This is the Bootstrap's Modal's restriction to initialize the Modal it should be placed in a visible parent element.
Regards.
Hello,
Thank you for your response,
Can you provide any example of this state(call Model from KTMenu)??
