v1.5.8 Added model, but there is some problems.

skolehjem/resources/views/admin/guides/create.blade.php

@@ -22,37 +22,6 @@
         #editor {
             margin-bottom: 1rem;
         }
-        .modal {
-            display: none; /* Hidden by default */
-            position: fixed; /* Stay in place */
-            z-index: 1; /* Sit on top */
-            padding-top: 100px; /* Location of the box */
-            left: 0;
-            top: 0;
-            width: 100%; /* Full width */
-            height: 100%; /* Full height */
-            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 */
-        }
-
-        /* Modal Content */
-        .modal-content {
-            background-color: #fefefe;
-            margin: auto;
-            padding: 20px;
-            border: 1px solid #888;
-            width: 330px;
-            min-width: 400px;
-        }
-
-        /* The Close Button */
-        .close {
-            color: #aaaaaa;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
-        }
     </style>
     <link href="{{ asset("/css/quill/quill.snow.css") }}" rel="stylesheet">
     <h1 id="errormesseages" >Opret Vejledning</h1>

skolehjem/resources/views/admin/news/index.blade.php

@@ -43,7 +43,7 @@
                     @endif
                     @if(auth()->user()->can('news.edit'))
                         <td><a href="{{ route("news.edit", [ "news" => $new ]) }}"><img class="w-100" src="{{ asset('/images/icons/pencil-dark.svg') }}" alt="Update"></a></td>
-                        <td><a href="#" id="preview" onclick="getPreviewValue({{$new->id}})" ><img class="w-100" src="{{ asset('/images/icons/preview-dark.svg') }}" alt="Update"></a></td>
+                        <td><a href="#" id="preview" onclick="modalNewsContent({{$new->id}})" ><img class="w-100" src="{{ asset('/images/icons/preview-dark.svg') }}" alt="Update"></a></td>
                     @endif
                     @if(auth()->user()->can('news.delete'))
                         <td>
@@ -55,8 +55,54 @@
             @endforeach
         </tbody>
     </table>
+
+    <div id="newsModal" class="modal zindex-100">
+        <div id="modal-content" class="modal-content text-black d-block w-50">
+            <span class="close" onclick="closeModal()">&times;</span>
+            <center>
+                <h1 id="titleEvent"></h1>
+                <p id="dateEvent"></p>
+                <hr>
+                <p id="descriptionEvent" style="white-space: pre-line"></p>
+
+            </center>
+        </div>
+    </div>
 @endsection
 @section('scripts')
+    <script>
+        var modalNews = document.getElementById("newsModal");
+
+        function modalNewsContent(id) {
+            $.ajax({
+                type: 'get',
+                url: '{{route('events.preview')}}',
+                data: {'preview':id},
+                success:function (data) {
+                    modalNews.style.display = "block";
+                    var l = JSON.parse(data);
+                    $("#titleEvent").text(l.name);
+                    $("#dateEvent").text(l.date);
+                    $("#descriptionEvent").text(l.description);
+
+
+                },
+                error:function (data) {
+                    console.log(data);
+                }
+            });
+        }
+
+        function closeModal() {
+            modalNews.style.display = "none";
+        }
+
+        window.onmousedown = function(event) {
+            if (event.target == modalNews) {
+                modalNews.style.display = "none";
+            }
+        }
+    </script>
     <script>
         $(document).ready( function () {
             $('#table_id').DataTable({
@@ -100,25 +146,5 @@
                 }
             })
         }
-
-        //Get the id and
-        function getPreviewValue(elm){
-            $.ajax({
-                type: 'get',
-                url: '{{route('events.preview')}}',
-                data: {'preview':elm},
-                success:function (data) {
-                    $l = JSON.parse(data);
-                    console.log($l);
-
-                },
-                error:function (data) {
-                    console.log(data);
-                }
-            });
-
-        }
-
-
     </script>
 @endsection