Fluxbit ViewComponents
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="modal" class="fixed inset-x-0 top-0 z-50 h-screen overflow-y-auto overflow-x-hidden md:inset-0 md:h-full flex bg-gray-900/50 dark:bg-gray-900/80 items-center justify-center" aria-hidden="false" onclick="if(event.target === this) this.classList.add('hidden')">
  <div class="relative h-full w-full p-4 md:h-auto max-w-md">
    <div class="relative flex max-h-[90dvh] flex-col rounded-lg bg-white shadow-sm dark:bg-gray-700">
      <div class="flex items-start justify-between rounded-t border-b p-5 dark:border-gray-600">
        <h3 class="text-xl font-medium text-gray-900 dark:text-white">A title</h3>
        <button onclick="this.parentElement.parentElement.parentElement.parentElement.classList.add('hidden');" class="close-button ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white" type="button" data-modal-hide="modal" aria-label="Close"><span class="sr-only">Dismiss</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
          </svg>
        </button></div>
      <div class="flex-1 overflow-auto p-6 ">
        This way is useful when you want to use with turbo.
        There is no need to create a buttom to open the modal.
      </div>
    </div>
  </div>
</div>
<div class="h-40"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%= fx_modal(
  id: 'modal',
  title: 'A title',
  only_css: true,
  opened: true,
  close_button_props: {
    onclick: "this.parentElement.parentElement.parentElement.parentElement.classList.add('hidden');"
  }
) do %>
  This way is useful when you want to use with turbo.
  There is no need to create a buttom to open the modal.
<% end %>
<div class="h-40"></div>

No notes provided.

No params configured.