Add files

templates/modal.html

@@ -0,0 +1,32 @@
+<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+     aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>Hier staat een mooi verhaaltje over het project wat je net hebt aangeklikt.</p>
+            </div>
+            {#      <div class="modal-footer">#}
+            {#        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>#}
+            {#        <button type="button" class="btn btn-primary">Save changes</button>#}
+            {#      </div>#}
+        </div>
+    </div>
+</div>
+
+<script>
+    $('#detailModal').on('show.bs.modal', function (event) {
+        let card = $(event.relatedTarget); // Button that triggered the modal
+        let name = card.data('name'); // Extract info from data-* attributes
+        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
+        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
+        let modal = $(this);
+        modal.find('.modal-title').text(name);
+        {#modal.find('.modal-body input').val(recipient)#}
+    })
+</script>