Workin on Model in Tour.show

motorradig/public/css/custom.css

@@ -68,3 +68,68 @@ p {
 #fileElem {
     display: none;
 }
+
+/*******************
+    Modal styles
+********************/
+.modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: 200ms ease-in-out;
+    border: 1px solid black;
+    border-radius: 10px;
+    z-index: 10;
+    background-color: white;
+    width: 500px;
+    max-width: 80%;
+}
+
+.modal.active {
+    transform: translate(-50%, -50%) scale(1);
+}
+
+.modal-header {
+    padding: 10px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid black;
+}
+
+.modal-header .title {
+    font-size: 1.25rem;
+    font-weight: bold;
+}
+
+.modal-header .close-button {
+    cursor: pointer;
+    border: none;
+    outline: none;
+    background: none;
+    font-size: 1.25rem;
+    font-weight: bold;
+}
+
+.modal-body {
+    padding: 10px 15px;
+}
+
+#overlay {
+    position: fixed;
+    opacity: 0;
+    transition: 200ms ease-in-out;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    pointer-events: none;
+}
+
+#overlay.active {
+    opacity: 1;
+    pointer-events: all;
+}
+

motorradig/resources/js/modal.js

@@ -0,0 +1,36 @@
+const openModalButtons = document.querySelectorAll("[data-modal-target]");
+const closeModalButtons = document.querySelectorAll("[data-close-button]");
+const overlay = document.getElementById("overlay");
+
+openModalButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+        const modal = document.querySelector(button.dataset.modalTarget);
+        openModal(modal);
+    });
+});
+
+overlay.addEventListener("click", () => {
+    const modals = document.querySelectorAll(".modal.active");
+    modals.forEach((modal) => {
+        closeModal(modal);
+    });
+});
+
+closeModalButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+        const modal = button.closest(".modal");
+        closeModal(modal);
+    });
+});
+
+function openModal(modal) {
+    if (modal == null) return;
+    modal.classList.add("active");
+    overlay.classList.add("active");
+}
+
+function closeModal(modal) {
+    if (modal == null) return;
+    modal.classList.remove("active");
+    overlay.classList.remove("active");
+}

motorradig/resources/views/tour/show.blade.php

@@ -75,12 +75,32 @@
 
                             @if(!App\Tour::has_participant($tour->id, Auth::user()->id))
                                 <a href="/tour/{{$tour->id}}/join" type="submit" class="btn btn-danger col-3 mb-2 float-right mr-2">Teilnehmen</a>
+
                             @else
                                 <a href="/tour/{{$tour->id}}/cancelBooking" type="submit" class="btn btn-danger col-3 mb-2 float-right mr-2">Absagen</a>
                             @endif
 
                         </form>
-
+                                <!-- Modal Test start -->
+                                <button data-modal-target="#modal" onclick="alert('test');">Open Modal</button>
+                                <div class="modal" id="modal">
+                                  <div class="modal-header">
+                                    <div class="title">Example Modal</div>
+                                    <button data-close-button class="close-button">&times;</button>
+                                  </div>
+                                  <div class="modal-body">
+                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quod alias
+                                    ut illo doloremque eum ipsum obcaecati distinctio debitis reiciendis
+                                    quae quia soluta totam doloribus quos nesciunt necessitatibus,
+                                    consectetur quisquam accusamus ex, dolorum, dicta vel? Nostrum
+                                    voluptatem totam, molestiae rem at ad autem dolor ex aperiam. Amet
+                                    assumenda eos architecto, dolor placeat deserunt voluptatibus tenetur
+                                    sint officiis perferendis atque! Voluptatem maxime eius eum dolorem
+                                    dolor exercitationem quis iusto totam! Repudiandae nobis nesciunt sequi
+                                    iure! Eligendi, eius libero. Ex, repellat sapiente!
+                                  </div>
+                                </div>
+                                 <!--Modal Test end -->
                     </div>
                 </div>
             </div>
@@ -121,34 +141,4 @@
         </div>
     </div>
 
-
-
-
-    <!--  Button trigger modal demo
-
-    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
-        Launch demo modal
-    </button>
-
-    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="exampleModalLabel">Teilnehmer entfernen</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    Sind sie sicher ??
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-success" data-dismiss="modal">Abbrechen</button>
-                    <button type="button" onclick="alert('LÖSCHEN'); return false;" data-dismiss="modal" class="btn btn-danger">Löschen</button>
-                </div>
-            </div>
-        </div>
-    </div>
--->
-
 @endsection