Bootstrap _Modal öffnet nicht

S

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:


Code: 
<!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>
 
Zuletzt bearbeitet von einem Moderator:
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?
 
Hi,
bitte schreibe Deinen Code in Codetags!
Bitte poste nur den notwendigen Code. So müssen wir uns durch all Deinen Code wurschteln.
am besten wäre auch wenn Du Dein Problem mit einem Codeeditor wie jsBin, jsFiddel, Codepen etc. postest. Dann könne wir direkt das Problem an ausführbaren Code testen.

Und Doppelpostings sehen wir hier nicht gerne. Also bitte korrigiere Dein Post wenn sich was ändert und erstelle keinen neuen!
 
Das wichtigste sehe ich nicht in deinem Codeschnipsel: Den Link zu der Bootstrap CSS Datei.
Oder ist das <link rel="stylesheet" href="css/styles.css"/> der?
Außerdem wäre es noch hilfreich zu wissen welche Bootstrap Version du verwendest.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück