Bootstrap _Modal öffnet nicht

sabrinkel

Grünschnabel
Hallo ihr Lieben,

Grünschnabel hier und ich raff´s grad mal wieder nicht :rolleyes:

Ich habe ein Modal kreiert, das auf Biegen und Brechen nicht öffnet. Bin den Code jetzt immer wieder durch gegangen, habe html validiert und und, aber ich komm nicht drauf.

Jemand eine Idee? :cry:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Stressfreie Zone</title>
<link rel="stylesheet" href="css/styles.css"/>
</head>

<body>
<div id="navbar-sidebar" class="navbar">
<a href="#home" class="navbar-brand">
<!--<img src="img/lineart_yoga pose_tree_gray.svg" class="logo"/>-->
<h4 class="text-center pt-2 text-white">StressfreieZone</h4>
<h6 class="text-center pb-3 text-white">Name</h6>
</a>
<nav class="nav nav-pills active flex-column">
<a href="#home" class="nav-link">
<i class="fas fa-home"></i>
Home
</a>
</nav>
<nav class="nav nav-pills flex-column">
<a href="#uebermich" class="nav-link">
<i class="fas fa-user"></i>
Über mich
</a>
</nav>
<nav class="nav nav-pills flex-column">
<a href="#vita" class="nav-link">
<i class="fas fa-building"></i>
VITA
</a>
</nav>
<nav class="nav nav-pills flex-column">
<a href="#leistungen" class="nav-link">
<i class="fab fa-buffer"></i>
Leistungen
</a>
</nav>
<nav class="nav nav-pills flex-column">
<a href="#seminare" class="nav-link">
<i class="fab fa-buffer"></i>
Seminare
</a>
</nav>
<nav class="nav nav-pills flex-column">
<a href="#literatur" class="nav-link">
<i class="fas fa-award"></i>
TV & Publikationen
</a>
</nav>
<nav class="nav nav-pills flex-column">
<a href="#kosten" class="nav-link">
<i class="fas fa-wallet"></i>
Kosten
</a>
</nav>
<nav class="nav nav-pills flex-column">
<a href="#kontakt" class="nav-link">
<i class="fas fa-address-card"></i>
Kontakt
</a>
</nav>
</div>
<!--<div class="social_media">
<a href="facebook.com">
<i class="fab fa-facebook"></i>
</a>
</div>-->
</div>

<div class="container-fluid">
<div data-bs-spy="scroll" data-bs-target="#navbar-sidebar" data-bs-offset="0" tabindex="0">
<div class="row one" id="home">
<div class="col-lg-12 justify-content-center top">
<h3 class="teaser headline accent ">Privatpraxis für <br>Psychotherapie & Coaching</h3>
</div>
</div>

<div class="row two">
<div class="col-lg-12 justify-content-center top">
<a href="index.html"></a>
</div>
</div>
<!--Über mich-->
<div id="uebermich" class="pt-3 text-center">
<h3 class="headline accent">Über mich</h3>
<div class="row three">
<div class="col-lg-12 mt-3 justify-content-center">
<img class="portrait rounded mb-3" src="img/portrait.jpg" alt="Bild zeigt die Therapeutin. Sie hat langes braunes Haar und lächelt in die Kamera"/>

</div>
</div>
</div>
<!--Vita-->
<div id="vita" class="pt-3 text-center">
<h3 class="headline accent">Vita</h3>
<div class="row four">
<div class="col-lg-12 mt-3">
<ul>
<li class="pb-3">
Jahr xxx: Psychologische Fachberaterin, Studium und Diplom am Institut für
angewandte Psychologie und Psychosomatik, Düsseldorf
(Thema der Diplomarbeit: Trauerbewältigung)
</li>
<li class="pb-3">
Jahr xxx: Amtsärztliche Heilpraktikerprüfung für Psychotherapie (1 HPG)
</li>
<li class="pb-3">
Jahr xxx: Fachqualifikation Verhaltenstherapie (DPS)
</li>
<li class="pb-3">
Jahr xxx: Fachqualifikation zur Entspannungstherapeutin (DPS)
</li>
<li class="pb-3">
Jahr xxx: Fachqualifikation EMDR (DPS)
</li>
<li class="pb-3">
Jahr xxx: Seminarleiterin, Trainerin und Dozentin für Vorträge, Seminare und Workshops zu den Fachthemen.
</li>
<li class="pb-3">
Jahr xxx: Ausbildungsleiterin für Burnout und Stresstherapeut/berater sowie
Gesprächspsychotherapie und prozessorientierter Kommunikation
</li>
<li class="pb-3">
Jahr xxx: Mehrjährige Auslandserfahrung.
</li>
<li class="pb-3">
Jahr xxx: Entwicklerin des Stress-Management-Konzepts
"Aufbruch statt Zusammenbruch" für mittelständische Unternehmen
</li>
</ul>
</div>
</div>
</div>
<div id="leistungen" class="pt-3 text-center">
<h3 class="headline accent">Leistungen</h3>
<div class="row five">
<div class="col-lg-4">
<a href="#" class="text-decoration-none text-dark">
<img src="img/burnout_vorschau.jpg" class="pic_ img-thumbnail" alt="#"/>
<p class="text-center mt-3">Burnout</p>
</a>
</div>
<div class="col-lg-4">
<a href="#" class="text-decoration-none text-dark">
<img src="img/couple_vorschau.jpg" class="pic_two img-thumbnail" alt="#"/>
<p class="text-center mt-3">Paartherapie</p>
</a>
</div>

<div class="col-lg-4">
<a href="#" class="text-decoration-none text-dark">
<img src="img/crisis_vorschau.jpg" class="pic_third img-thumbnail" alt="#"/>
<p class="text-center mt-3">Krisenbewältigung</p>
</a>
</div>
</div>
</div>
<div id="kosten" class="pt-3 text-center">
<h3 class="headline accent">Kosten</h3>
<div class="row six">
<div class="col-lg-12 mt-3">
<ul>
<li>Einzeltherapie</li>
<li>Für eine 50-minütige Sitzung berechne folgenden Satz:</li>
<li>09:00Uhr bis 17:00Uhr: 75€</li>
<li>ab 17:00Uhr: 85€ </li>
<li class="mt-4">Paartherapie</li>
<li>Für eine 50-minütige Sitzung berechne folgenden Satz:</li>
<li>09:00Uhr bis 17:00Uhr 90€</li>
<li>ab 17:00Uhr 105€</li>
<li class="mt-4">Beratung über Email oder Telefon</li>
<li>09:00Uhr bis 17:00Uhr 1,40€/Minute</li>
<li>ab 17:00Uhr ???</li>
<li class="mt-5">Durch meine Zulassung als Heilpraktikerin für Psychotherapie ist teilweise die
Kostenerstattung über eine private Kranken- bzw. Zusatzversicherung möglich.
Klären Sie dies bitte ggf. vor Therapiebeginn mit Ihrer Versicherung ab.
</li>
</ul>
</div>
</div>
</div>
<div id="literatur" class="pt-3 text-center">
<h3 class="headline accent">TV & Publikationen</h3>
<div class="row seven">
<div class="col-lg-4 mt-3" data-toggle="modal" data-target="#myModal1">
<a href="#myModal1" class="text-decoration-none text-dark">

<img src="img/buch3.jpg" class="img-thumbnail" alt="#"/>
<div class="card-body">
<p class="button btn-sm text-center mt-3 border">
Hier kaufen
</p>
</div>

</a>
</div>
<div class="col-lg-4 mt-3" data-toggle="modal" data-target="#myModal2">
<a href="#myModal2" class="text-decoration-none text-dark">

<img src="img/buch2.jpg" class="img-thumbnail" alt="#"/>
<div class="card-body">
<p class="button btn-sm text-center mt-3 border">
Hier kaufen
</p>
</div>

</a>
</div>
<div class="col-lg-4 mt-3" data-toggle="modal" data-target="#myModal3">
<a href="#myModal3" class="text-decoration-none text-dark">

<img src="img/buch1.jpg" class="img-thumbnail" alt="#"/>
<div class="card-body">
<p class="button btn-sm text-center mt-3 border">
Hier kaufen
</p>
</div>

</a>
</div>
</div> <!--Ende row-->
</div>
<!-- Modal 1-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle1" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<!--Modal Inhalt 1-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle1">Entscheide, wen Du lieben willst</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<img src="img/buch3.jpg" class="img-thumbnail" alt="#"/>
<p class="card-text text-center pt-4">Erklärung</p>
</div>
<div class="modal-footer">
<button type="button" class="button btn-sm" data-dismiss="modal">Close</button>
</div>
</div> <!--Ende Modal content-->
</div> <!--Ende Modal Dialog-->
</div> <!--Ende Modal fade-->

<!-- Modal 2-->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle2" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<!--Modal Inhalt 1-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle2">Titel2</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<img src="img/buch3.jpg" class="img-thumbnail" alt="#"/>
<p class="card-text text-center pt-4">Erklärung</p>
</div>
<div class="modal-footer">
<button type="button" class="button btn-sm" data-dismiss="modal">Close</button>
</div>
</div> <!--Ende Modal content-->
</div> <!--Ende Modal Dialog-->
</div> <!--Ende Modal fade-->

<!-- Modal 1-->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle3" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<!--Modal Inhalt 1-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle3">Titel3</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<img src="img/buch3.jpg" class="img-thumbnail" alt="#"/>
<p class="card-text text-center pt-4">Erklärung</p>
</div>
<div class="modal-footer">
<button type="button" class="button btn-sm" data-dismiss="modal">Close</button>
</div>
</div> <!--Ende Modal content-->
</div> <!--Ende Modal Dialog-->
</div> <!--Ende Modal fade-->
<div id="kontakt" class="pt-3 text-center">
<h3 class="headline accent">Kontakt</h3>
<div class="row eight">
<div class="col-lg-12">
<p><strong>Praxis:</strong></p>
<p>Ingrid Strobel</p>
<p>78351 Bodman-Ludwigshafen</p>
<p>Tel.: 07773 9599811</p>
<p>E-Mail:<a href="#"></a></p>
</div>
</div>
</div>
</div>
</div><!--Ende Container-->




<!--Verlinkung der beiden Java Script Dateien-->
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/57ab52abb9.js" crossorigin="anonymous"></script>


</body>
</html>
 

sabrinkel

Grünschnabel
Weil die Erste mit einer Zip Datei versehen war. Ein netter Mensch hatte mich dann darauf hingewiesen, dass ZIP Dateien nicht gerne hier geöffnet werden.
Hast Du denn eine Lösung für mich?