rafal.siepak
PRO
said 10 months ago
on
Hotwire Modals
:
Hi there,
Thank you for the awesome video.
I am using tailwindcss and I want to directly open the modal after clicking "edit" button. Currently after clicking the "edit" button I get another button to open the modal, which works fine, but it is not as I would like to have it. I am using tailwindcss-stimulus-components and this is my code. They say that I should make sure that `data-modal-open-value` is set on the controller element or data-modal-open-value may be set to true to open modal on page load. How to do it?
This is my code:
Thank you for the awesome video.
I am using tailwindcss and I want to directly open the modal after clicking "edit" button. Currently after clicking the "edit" button I get another button to open the modal, which works fine, but it is not as I would like to have it. I am using tailwindcss-stimulus-components and this is my code. They say that I should make sure that `data-modal-open-value` is set on the controller element or data-modal-open-value may be set to true to open modal on page load. How to do it?
This is my code:
<%= turbo_frame_tag :remote_modal, target: :_top do %>
<div data-controller="modal" data-action="keydown.esc->modal#close" tabindex="-1" class="relative z-10">
<a href="#" data-action="click->modal#open" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded">Open Modal</a>
<!-- Modal Background -->
<div class="hidden fixed inset-0 bg-black bg-opacity-80 overflow-y-auto flex items-center justify-center"
data-modal-target="background"
data-action="click->modal#closeBackground"
data-transition-enter="transition-all ease-in-out duration-300"
data-transition-enter-from="bg-opacity-0"
data-transition-enter-to="bg-opacity-80"
data-transition-leave="transition-all ease-in-out duration-300"
data-transition-leave-from="bg-opacity-80"
data-transition-leave-to="bg-opacity-0">
<!-- Modal Container -->
<div data-modal-target="container" class="max-h-screen w-full max-w-lg relative">
<!-- Modal Card -->
<div class="m-1 bg-white rounded shadow">
<div class="p-8">
<h2 class="text-xl mb-4">Large Modal Content</h2>
<%= render "project/form", project: project %>
<div class="flex justify-end items-center flex-wrap mt-6">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" data-action="click->modal#close:prevent">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<% end %>