Issue with Closing KT Menu Modal on the click on the different button or page the page
Dear Support Team,
I hope this message finds you well. My name is Ahmad Bilal, and I am utilizing the KT Metronic theme for our projects. First, I'd like to express my appreciation for the quality of your theme and the features it offers.
I am writing to seek assistance with a specific issue we have encountered while using the KT Metronic theme. We are utilizing the KT menu modal that is triggered by a button. However, we are facing a challenge with closing or hiding the menu modal when interacting with other buttons, routes, or anchor links.
Here's a brief overview of our setup:
We have a button that opens the menu modal. We also have other buttons, routes, or anchor links that have different functionality now the issue is if I have open the KT menu modal and change the page the menu won't close or hide and move to the top left of the page.
Could you kindly provide guidance or recommendations on how we can achieve seamless behavior when interacting with other elements?
Furthermore, I want to add the overlay on the body on the menu open like me do on the other modals. we would greatly appreciate it if you could guide us on the process of implementing this feature correctly. If there are any specific functions or methods that we should be utilizing, please provide us with the necessary documentation or code examples.
Thank you very much for your time and support. We are looking forward to your assistance in resolving this issue and optimizing the user experience for our projects.
Best Regards!
Replies (1)
Hi Ahmad,
Thank you for reaching out to us.
To close your modal, simply add data-bs-dismiss="modal" to any button within your modal. For more details, refer to: https://preview.keenthemes.com/metronic8/vue/docs/base/modal
If you need to close the modal after performing certain actions, you can programmatically hide the modal using the following code:
import { Modal } from "bootstrap";
// modalEl is your modal html element
if (!modalEl) {
return;
}
const myModal = Modal.getInstance(modalEl);
myModal?.hide();In Metronic Vue we have a helper function to hide your modal.
import { hideModal } from "@/core/helpers/dom";
hideModal(yourMenuElementRef.value);Unfortunately, at the moment, there isn't a pre-built option to activate a page overlay for the menu. However, you can achieve this by implementing an overlay through the menu kt.menu.dropdown.show and kt.menu.dropdown.hide events.
For example please refer to this gist file.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
