test modal

static/js/modal.js

@@ -0,0 +1,3 @@
+window.addEventListener('DOMContentLoaded', (event) => {
+    $('#sommerAktionModal').modal('show');
+});

templates/index.html

@@ -22,6 +22,20 @@ <h1>{{config.title}}</h1>
 </header>
 {% endblock header %}
 {% block content %}
+<!-- Modal -->
+<div class="modal fade" id="sommerAktionModal" tabindex="-1" aria-labelledby="sommerAktionModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="sommerAktionModalLabel">Sommeraktion für Tierbesitzer!</h5>
+        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        Nutzen Sie meine Sommeraktion! Bis zum 30.09.2023 biete ich einen Rabatt von 10% auf alle Behandlungen. Buchen Sie jetzt und nutzen Sie dieses großartige Angebot!
+      </div>
+    </div>
+  </div>
+</div>
 <!-- Main Content -->
 <div class="container">
   <div class="row">
@@ -210,4 +224,9 @@ <h2>Mein Tierheilpraktiker Blog für Naturheilkunde, Hund und Pferd</h2>
     </div>
   </div>
 </div>
-{% endblock content %}
+{% endblock content %}
+
+{% block extrascripts %}
+  <!-- Custom Script to open modal on page load -->  
+  <script defer src="{{ get_url(path='js/modal.js') }}"></script>
+{% endblock extrasripts %}