Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI 
How to load and open modal by clicking on button?
Hi,
Hereby the components, my questions are at the end:
Index.vue
<div class="row g-6 g-xl-9">
<template v-for="(el, i) in ["element1", "element2", "element3"]":key="i">
<div class="col-xl-6">
<Widget widget-item="el" :title="`title_${i}`"></Widget>
</div>
</template>
</div>Widget.vue
<template>
<div class="card">
<div class="card-header border-0">
<h3 class="card-title align-items-start flex-column cursor-pointer" data-bs-toggle="collapse" :data-bs-target="`#widget_${widgetItem.id}`"aria-expanded="true"
:aria-controls="`kt_lesson_card_module_card_${widgetItem.id}`">
<span class="card-label fw-bold fs-3 mb-1">{{ title }}</span>
<div class="card-toolbar">
<button type="button"
class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"
data-kt-menu-flip="top-end" >
<span class="svg-icon svg-icon-2">
<inline-svg src="media/icons/duotune/general/gen024.svg" />
</span>
</button>
<Dropdown :widget-item="widgetItem"></Dropdown>
</div>
</div>
<div>CONTENT</div>
</div>
</template>
</pre
<strong>Dropdown.vue</strong>
<pre>
<template>
<div
class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semobold py-4 w-250px fs-6" data-kt-menu="true">
<div class="menu-item px-5">
<a href="#" data-bs-toggle="modal" data-bs-target="#kt_modal_new"
class="menu-link px-5">NEW MODAL</a>
</div>
<Modal :widget-item="widgetItem"></Modal>
</div>
</template>Modal.vue
<template>
<div class="modal fade" id="kt_modal_new" tabindex="-1"
aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false"
>
<div class="modal-dialog modal-dialog-centered mw-650px">
<div class="modal-content"></div>
</div>
</div>
</template>My problem and questions
I am fetching the element in index page from backend and reinitializeComponents(): But the modal is also loaded for each component. How can I load the component only when it's needed, e.g. by clicking on a button?
I have also created a function for click
const newModal = () => {
const myModal = new Modal(document.getElementById("kt_modal_new"));
myModal.show();};
But when I click on the button, I'm getting
Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
1. How can I prevent the loading of Modal.vue component for each widget?
2. How can I open the Modal.vue component via a button?
Replies (2)
I had to dig it out of their CalendarApp1.vue today and thought I share:
import { Modal } from "bootstrap";
const modal = new Modal(document.getElementById("kt_modal_add_event"));
modal.show();
Hi,
You can move the modal component from the Widget.vue to the layout level, and then toggle this modal using the button below. Just update data-bs-target attribute with your modal id.
<a href="#%22%20class=%22btn%20btn-sm%22%20data-bs-toggle=%22modal%22%20data-bs-target=%22#your_modal_id" target="_blank" rel="noopener noreferrer">Open Modal</a>Regards,
Lauris Stepanovs,
Keenthemes Support Team
