Modal-Image

Mit der Bootstrap-Klasse "modal" kann auch ein Bild als Inhalt im Fenster geöffnet werden. Meist werden modale Informationsfenster benutzt. Es kann aber auch ein kleines Bild anstelle eines Buttons und ein Bild im Inhalt des modalen Fensters platziert werden.

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            

<!doctype html>
<html lang="de">
<head>
    <meta charset=utf-8>
    <title>Bootstrap CDN</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
    
    </style>

</head>
<body>

<div class="container">
  <h2>Bild mit Modal-Fenster zeigen</h2>
	 <div data-toggle="modal" data-target="#myModal">
		 <img class="thumb" src="https://depot43.ch/unterlagen/assets/gallery/brunnen.jpg" alt="Bild" />
	</div>

	<div class="modal fade" id="myModal" role="dialog">
		<div class="modal-dialog" data-dismiss="modal">
			<img src="https://depot43.ch/unterlagen/assets/gallery/brunnen.jpg" alt="Bild" />
		</div>
	</div>
</div>

</body>
</html>


 

            

Verwendete Bibliotheken:

bootstrap.css
bootstrap.js
jquery.js

Vorschaubild als Auslöser

Die beiden Attribute im div-Element sind die Verbindung zwischen Thumbnail-Bild und modalem Fenster, "data-toggle" verknüpft die nötigen Funktionen, "data-target" verweist auf das Ziel-Element.

<div data-toggle="modal" data-target="#myModal">
         <img class="thumb" src="https://... />
</div>

Der Inhalt im modalen Fenster

Das Ziel wird als ID definiert: id="myModal" wird bei Klick aud den "data-target" geöffnet. Rolle und Klasse "dialog" regeln die Stile. Das Attribut data-dismiss="modal" schliesst das Element bei Klick. Der Inhalt ist ein ganz normal verlinktes Bild.

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog" data-dismiss="modal">
            <img src="https://depot43.ch/unterlagen/assets/gallery/brunnen.jpg" alt="Bild" />
        </div>
 </div>