It took me a while to figure out how to style a modal window with Tailwind CSS (had to Google how to center a div), so want to share what I've got for anyone who will be searching for LiveView Tailwind CSS Modal styles.
def modal(assigns) do
assigns = assign_new(assigns, :return_to, fn -> nil end)
~H"""
<div id="modal" class="overflow-y-auto fixed inset-0 z-10 pt-6 phx-modal" phx-remove={hide_modal()}>
<div class="flex justify-center items-end px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-200 opacity-75"></div>
</div>
<div id="modal-content" class="inline-block overflow-hidden px-4 pt-5 pb-4 text-left align-bottom bg-white rounded-lg shadow-xl transition-all transform phx-modal-content sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline"
phx-click-away={JS.dispatch("click", to: "#modal-close")}
phx-window-keydown={JS.dispatch("click", to: "#modal-close")}
phx-key="escape">
<div class="relative">
<%= if @return_to do %>
<%= live_patch "✖",
id: "modal-close",
to: @return_to,
phx_click: hide_modal(),
class: "inline-flex absolute right-0 text-gray-400 bg-white rounded-md phx-modal-close hover:text-gray-500 focus:outline-none"
%>
<% else %>
<a id="close" href="#" class="inline-flex absolute right-0 text-gray-400 bg-white rounded-md phx-modal-close hover:text-gray-500 focus:outline-none" phx-click={hide_modal()}>✖</a>
<% end %>
</div>
<%= render_slot(@inner_block) %>
</div>
</div>
</div>
"""
end
Tested with: phoenix_live_view: 0.17.5, tailwindcss: 3.0.2.
Top comments (0)