Modals with HTML dialog element, Tailwind and Stimulus

corsego · Aug 15, 2023 · f5a6356 · f5a6356
1 parent 270e25b
commit f5a6356
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="dialog"
+export default class extends Controller {
+  static targets = ["modal"]
+  connect() {
+  }
+
+  open() {
+    // this.modalTarget.show();
+    this.modalTarget.showModal();
+    document.body.classList.add("overflow-hidden")
+  }
+
+  clickOutside(event) {
+    if (event.target === this.modalTarget) {
+      this.modalTarget.close();
+    }
+  }
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -44,6 +44,26 @@
         </div>
       </nav>
       <main class="bg-slate-500 w-5/6 p-4 flex-grow">
+
+        <%= Time.zone.now %>
+        <div data-controller="dialog" data-action="click->dialog#clickOutside">
+          <button data-action="click->dialog#open">Open modal</button>
+          <dialog data-dialog-target="modal" class="backdrop:bg-slate-400 backdrop:opacity-80 w-full lg:w-2/3">
+            <div class="p-4">
+              <p>Greetings, one and all!</p>
+              <form>
+                <button formmethod="dialog">Cancel</button>
+                <button>Submit</button>
+              </form>
+              <% (1..100).each do |i| %>
+                <div class="bg-rose-400">
+                  <%= i%>
+                </div>
+              <% end %>
+            </div>
+          </dialog>
+        </div>
+
         2-column layout with fixed widths
         <div class="flex flex-col md:flex-row gap-4">
           <div class="w-full md:w-3/4">