Depot43-Unterlagen - Modale Fenster

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>

<h3>Schaltfläche öffnet ein modales Fenster</h3>
	<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Öffnen</button>

<div id="myModal" class="modal fade" role="dialog">
	 <div class="modal-dialog">

	 <div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">×</button>
			<h4 class="modal-title">Modal Titel</h4>
		</div>
		<div class="modal-body">
			<p>Die Meldung im modalen Fenster. Das modale Fenster kann mit Klick auf die Seite geschlossen werden.</p>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Schliessen</button>
		</div>
		</div>
	</div>
</div>

</body>
</html>


 

            

Bemerkung:

Ein modales Fenster braucht jQuery, aber kein weiteres Javascript. Es ist wie eine kleine Website aufgebaut:

Ein Auslöser (Button) öffnet bei Klick das Fenster
Das modale Fenster
- Container für den modal-Dialog
- - Modaler Inhalt
- - - Header
- - - - Kleiner X-Button zum schliessen (optional)
- - - - Titel der Meldung
- - - Body
- - - - Meldung
- - - Footer
- - - - Button Anschrift zum schliessen (optional)

Button und Fenster müssen die Bezeichnungen für "data-target" und "id" identisch sein.

Die Textbereiche "modal-header", "modal-footer" oder "modal-body" lassen sich mit den Klassen der abels ergänzen Bspw.:

<div class="modal-header label-primary">
<div class="modal-footer label-danger">