Displaying a Modal
I am trying to get a minimal example of using Bootstrap Modals, and managing that modal using state.
Here is
routes/Index.tsx
:
And here is islands/Modal.tsx
: https://paste.jlcarveth.dev/api/02dcac97-dc65-4802-ad77-81e8ac0a8de9
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 show
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 onClick
of that close button. But the island can't seem to access the bootstrap API. I have tried importing bootstrap via npm:bootstrap
, as well as via https://esm.sh/bootstrap
In short; I want to be able to toggle the Modal on and off (visible / hidden) without having to rely on the data-bs-toggle
and data-bs-target
HTML attributes since that prevents me from managing the modal state.3 Replies
I wasn't able to find the answer to your question in the official Deno documentation. However, based on the code snippet you provided, I can offer some general advice, but please note that this advice is not based on the Deno documentation, and you should double-check the accuracy of the advice given.
In your
routes/Index.tsx
, you are correctly importing the Bootstrap CSS and JS files. However, I noticed that you are using the crossorigin
attribute in your link
and script
tags. The correct attribute name is crossOrigin
(with a capital 'O') in JSX. This might not be the cause of your issue with the modal state, but it's worth correcting.
Regarding the Bootstrap modal API, if you are trying to access it from a Deno Fresh project, you should ensure that Bootstrap's JavaScript is fully loaded and available in the window context where your island component is trying to access it. If you are importing Bootstrap via npm:bootstrap
or https://esm.sh/bootstrap
, make sure that the import is done correctly and that the Bootstrap JavaScript bundle is initialized before you try to use it in your component.
Since you are trying to manage the state programmatically, you might need to use the Bootstrap Modal methods like show()
and hide()
or manipulate the classes directly as you mentioned. If the Bootstrap API is not accessible, it could be due to the way the scripts are loaded or executed in the context of your Deno Fresh application.
If you continue to face issues, I recommend checking the following:
1. Ensure that the Bootstrap JavaScript is loaded and executed before your island component tries to use it.
2. Verify that the Bootstrap JavaScript is not being blocked or unloaded when your island component is rendered.
3. Check for any JavaScript errors in thebrowser's console that might indicate problems with loading or using Bootstrap.
Remember to consult the Bootstrap documentation for the correct usage of the modal API and consider reaching out to the community for more specific guidance on integrating Bootstrap with Deno Fresh.
Good bot, I will try
window.bootstrap...