Basic functionality: Popup Dialogue window

motorradig/public/css/custom.css

@@ -72,64 +72,40 @@ p {
 /*******************
     Modal styles
 ********************/
+/* The Modal (background) */
 .modal {
-    position: fixed;
+    display: none; /* Hidden by default */
-    top: 50%;
+    position: fixed; /* Stay in place */
-    left: 50%;
+    z-index: 1; /* Sit on top */
-    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;
+    top: 0;
-    bottom: 0;
+    width: 100%; /* Full width */
-    background-color: rgba(0, 0, 0, 0.5);
+    height: 100%; /* Full height */
-    pointer-events: none;
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }
 
-#overlay.active {
+/* Modal Content/Box */
-    opacity: 1;
+.modal-content {
-    pointer-events: all;
+    background-color: #fefefe;
+    margin: 15% auto; /* 15% from the top and centered */
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%; /* Could be more or less, depending on screen size */
 }
 
+/* The Close Button */
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}

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

@@ -82,25 +82,22 @@
 
                         </form>
                                 <!-- Modal Test start -->
-                                <button data-modal-target="#modal" onclick="alert('test');">Open Modal</button>
+
-                                <div class="modal" id="modal">
+                                <!-- Trigger/Open The Modal -->
-                                  <div class="modal-header">
+                                <button id="myBtn">Open Modal</button>
-                                    <div class="title">Example Modal</div>
+
-                                    <button data-close-button class="close-button">&times;</button>
+                                <!-- The Modal -->
-                                  </div>
+                                <div id="myModal" class="modal">
-                                  <div class="modal-body">
+
-                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quod alias
+                                <!-- Modal content -->
-                                    ut illo doloremque eum ipsum obcaecati distinctio debitis reiciendis
+                                    <div class="modal-content">
-                                    quae quia soluta totam doloribus quos nesciunt necessitatibus,
+                                        <span class="close">&times;</span>
-                                    consectetur quisquam accusamus ex, dolorum, dicta vel? Nostrum
+                                        <p>Some text in the Modal..</p>
-                                    voluptatem totam, molestiae rem at ad autem dolor ex aperiam. Amet
+                                    </div>
-                                    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 -->
+
+                                <!--Modal Test end -->
                     </div>
                 </div>
             </div>
@@ -141,4 +138,33 @@
         </div>
     </div>
 
+    <script>
+        // Get the modal
+        var modal = document.getElementById("myModal");
+
+        // Get the button that opens the modal
+        var btn = document.getElementById("myBtn");
+
+        // Get the <span> element that closes the modal
+        var span = document.getElementsByClassName("close")[0];
+
+        // When the user clicks on the button, open the modal
+        btn.onclick = function() {
+            console.log("Clicked Open Modal")
+            modal.style.display = "block";
+        }
+
+        // When the user clicks on <span> (x), close the modal
+        span.onclick = function() {
+            modal.style.display = "none";
+        }
+
+        // When the user clicks anywhere outside of the modal, close it
+        window.onclick = function(event) {
+            if (event.target == modal) {
+                modal.style.display = "none";
+            }
+        }
+    </script>
+
 @endsection

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

@@ -94,34 +94,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