Displaying a Modal
I am trying to get a minimal example of using Bootstrap Modals, and managing that modal using state.
Here is
And here is
The modal can open and close fine. The issue is that the state of the Modal can't be controlled programatically. When I have used Bootstrap modals in the past (with React), it was as simple as adding / removing the
So I try to hide / show the modal via the bootstrap API, which you can see me try in the
In short; I want to be able to toggle the Modal on and off (visible / hidden) without having to rely on the
Here is
routes/Index.tsxroutes/Index.tsx:And here is
islands/Modal.tsxislands/Modal.tsx: https://paste.jlcarveth.dev/api/02dcac97-dc65-4802-ad77-81e8ac0a8de9The modal can open and close fine. The issue is that the state of the Modal can't be controlled programatically. When I have used Bootstrap modals in the past (with React), it was as simple as adding / removing the
showshow class from the modal. That approach no longer seems to work. So I try to hide / show the modal via the bootstrap API, which you can see me try in the
onClickonClick of that close button. But the island can't seem to access the bootstrap API. I have tried importing bootstrap via npm:bootstrapnpm:bootstrap, as well as via https://esm.sh/bootstraphttps://esm.sh/bootstrapIn short; I want to be able to toggle the Modal on and off (visible / hidden) without having to rely on the
data-bs-toggledata-bs-toggle and data-bs-targetdata-bs-target HTML attributes since that prevents me from managing the modal state.
