Bootstrap 5 _ Varying modal content für Thumbnails

sabrinkel · 21. Dezember 2020

Hallo Ihr Lieben,
Grünschnabel hier.

Ich habe 2 Reihen à 3 Thumbnails.
Wenn ich auf ein Thumbnail klicke, soll sich ein Modal öffnen mit (erst mal) dem Thumbnail als Inhalt.
Also Klick auf Bild 1 eröffnet mir Bild 1, Klick auf Bild 2 eröffnet mir Bild 2.
Nun habe ich mit getbootstrap.com gelernt, dass man mit "Varying modal content" schon mal einen Anfang gemacht hat, jedoch, um den Inhalt zu differenzieren, mit data-modal="#" arbeiten soll. Soweit verstanden!

Außerdem ist offensichtlich ein bisschen Java Scripts erforderlich (?!)........bissl blöd wenn man noch keine Java kann.

Geht das denn auch anders, also ohne Java?! Ich bin ehrlich gesagt verzweifelt am Internet-Durchforsten und habe noch nichts adäquates finden können.
Nichtsdestotrotz habe ich mit den wenigen Kenntnissen und logischem Verständnis etwas zusammen gebastelt, wovon ich ausgehe, dass es passen müsste.

Bin ja eigentlich überzeugt, dass nicht mehr viel fehlt, um das gewünschte Ergebnis zu erhalten, aber ich komme nicht auf das fehlende Quäntchen.
Gibt es da draußen ein Brain, welches mir auf die Sprünge verhelfen kann?

Datei wäre angehängt und wie folgt ein kleiner Ausschnitt.

VlG S

Code

HTML:

<main class="thumbnail-position">
    <div class="container">
        <h1 class="text-center text-dark">Titel</h1>
        <div class="row justify-content-center" class="modal-open">
            <div class="col-lg-3 mt-5 mr-3" id="pic1">
                <a href="#" class="text-dark text-decoration-none">
                    <div class="card" style="width: 18rem;">
                        <img src="#" class="img-thumbnail" alt="#" />
                        <div class="card-body">
                            <h5>Titel</h5>
                            <p class="card-text">Blablablablabla</p>
                            <button type="button" class="btn btn-dark" data-modal="pic1" data-toggle="modal" data-target="#exampleModalScrollable">
                                Mehr...
                            </button>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 mt-5 mr-3" id="pic2">
                <a href="#" class="text-dark text-decoration-none">
                    <div class="card" style="width: 18rem;">
                        <img src="#" class="img-thumbnail" alt="#" />
                        <div class="card-body">
                            <h5>Titel</h5>
                            <p class="card-text">Blablablablabla</p>
                            <button type="button" class="btn btn-dark" data-modal="pic2" data-toggle="modal" data-target="#exampleModalScrollable">
                                Mehr...
                            </button>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 mt-5 mr-3" id="pic3">
                <a href="#" class="text-dark text-decoration-none">
                    <div class="card" style="width: 18rem;">
                        <img src="#" class="img-thumbnail" alt="#" />
                        <div class="card-body">
                            <h5>Titel</h5>
                            <p class="card-text">Blablablablabla</p>
                            <button type="button" class="btn btn-dark" data-modal="pic3" data-toggle="modal" data-target="#exampleModalScrollable">
                                Mehr...
                            </button>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="row justify-content-center" class="modal-open">
            <div class="col-lg-3 mt-1 mr-3" data-modal="pic4" data-toggle="modal" data-target="#exampleModalScrollable">
                <a href="#" class="text-dark text-decoration-none">
                    <div class="card" style="width: 18rem;">
                        <img src="#" class="img-thumbnail" alt="#" />
                        <div class="card-body">
                            <h5>Titel</h5>
                            <p class="card-text">Blablablablabla</p>
                            <button type="button" class="btn btn-dark" data-modal="pic4" data-toggle="modal" data-target="#exampleModalScrollable">
                                Mehr...
                            </button>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 mt-1 mr-3" data-modal="pic5" data-toggle="modal" data-target="#exampleModalScrollable">
                <a href="#" class="text-dark text-decoration-none">
                    <div class="card" style="width: 18rem;">
                        <img src="#" class="img-thumbnail" alt="#" />
                        <div class="card-body">
                            <h5>Titel</h5>
                            <p class="card-text">Blablablablabla</p>
                            <button type="button" class="btn btn-dark" data-modal="pic5" data-toggle="modal" data-target="#exampleModalScrollable">
                                Mehr...
                            </button>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-3 mt-1 mr-3" data-modal="pic6" data-toggle="modal" data-target="#exampleModalScrollable">
                <a href="#" class="text-dark text-decoration-none">
                    <div class="card" style="width: 18rem;">
                        <img src="#" class="img-thumbnail" alt="#" />
                        <div class="card-body">
                            <h5>Titel</h5>
                            <p class="card-text">Blablablablabla</p>
                            <button type="button" class="btn btn-dark" data-modal="pic6" data-toggle="modal" data-target="#exampleModalScrollable">
                                Mehr...
                            </button>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!-- Modal 1-->

    <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content" data-modal="pic1">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalScrollableTitle">Titel</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="#" class="img-thumbnail" alt="#" />
                    <p class="card-text">Blablablablabla</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal 2-->

    <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content" data-modal="pic2">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalScrollableTitle">Titel</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="#" class="img-thumbnail" alt="#" data-target="#carouselExample" data-slide-to="1" />
                    <p class="card-text">Blablablablabla</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</main>

Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
<script>
var modalBtns = document.querySelectorAll(".exampleModalScrollable");

modalBtns.forEach(function(btn) {
    exampleModalScrollable.onclick = function() {
        var modal = btn.getAttribute("data-modal");

        document.getElementByID(modal).style.display = "block";
    };
});
</script>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap/bootstrap.bundle.min.js"></script>

sabrinkel · 21. Dezember 2020

Habe es gerade selbst hinbekommen OHNE Java!

Jubiiijuuuuuuuu !!!!!

Sempervivum · 21. Dezember 2020

Gratuliere! Dann vermute ich, dass Du für jedes Bild ein eigenes Modal angelegt hast? Das funktioniert selbstverständlich, ist aber nicht besonders änderungsfreundlich.
So geht es mit nur einem Modal, mit nur wenigen Zeilen jQuery:

Javascript:

// Eventlistener fuer das Oeffnen des Modals registrieren:
$('#exampleModalScrollable').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var pic = button.data('pic') // Extract src of pic from data-pic attribute
    // Das Modal bereit stellen:
    var modal = $(this)
    // img-Element für das Thumbnail ermitteln
    // und src-Attribut auf den zuvor ermittelten Wert setzen:
    modal.find('.modal-body .img-thumbnail').attr('src', pic);
});

Das data-Attribut habe ich dabei auf "pic" umbenannt, daher muss der Button dann so aussehen:

HTML:

<button type="button" class="btn btn-dark" data-pic="images/dia0.jpg" data-toggle="modal" data-target="#exampleModalScrollable">
    Mehr...
</button>

Jan-Frederik Stieler · 22. Dezember 2020

@sabrinkel Kleine Anmerkung, Die Scriptsprache heißt Javascript nicht Java. Beides hat nichts miteinander zu tun. Java ist eine Programmiersprache und eine Laufzeitumgebung.
Z.B. Apps auf Android werden damit programmiert.

In Deinem geposteten Code lädst Du jQuery zweimal!
Am besten wrapst Du auch Dein JQuery um einen Doument ready Eventlistener.

Javascript:

$( document ).ready(function() {
  // Handler for .ready() called.
});

oder

$(function() {
  // Handler for .ready() called.
});

.ready() | jQuery API Documentation

Und Variablen deklariert man inzwischen besser mit let
let - JavaScript | MDN
Das ist grad für Anfänger einfacher Fehler im Gültigkeitsbereich zu vermeiden.

var - JavaScript | MDN

Bootstrap: Du scheints ja noch Anfänger zu sein, da würde ich Dir davon abraten Bootstrap 5 zu nutzen da sich das noch im Alpha Stadium befindet.
Aktuelle Version ist Bootstrap 4.

Grüße

Bootstrap 5 _ Varying modal content für Thumbnails

sabrinkel

Grünschnabel

Anhänge

sabrinkel

Grünschnabel

Sempervivum

Erfahrenes Mitglied

Jan-Frederik Stieler

Monsterator

Neue Beiträge