Modal

Beispiele für Bootstrap Modal und Sticky

Popup Layer Fenster für Dialoge
Seht auch den neuen Popup Builder

Bootstrap Modal CSS Modal Sticky

Modal Layer Fenster von Bootstrap

Man kann mit Bootstrap sehr einfach Popup-Fenster erstellen, über z.B. einen Text-Link oder auch einen Button wie bei dem Besipiel unten.

Beipiel mit Icons

Für detaillierte Anweisungen zu diesem Layer guckt bitte bei getbootstrap.com

1

Klicke auf das Icon

Modal mit Textlink

2

Klicke auf das Icon

Modal mit Text und Bild

3

Klicke auf das Icon

Modal groß mit Hintergrund

Beipiel der Bootstrap Class "sticky-top"

Die CSS Eigenschaft "sticky" fixiert Elemente an vorbestimmten Positionen nach dem Scrollen.
<section class="mbr-section content2 sticky-top">

Tutorial

Für detaillierte Anweisungen guckt bitte bei getbootstrap.com und/oder auch bei holdirbootstrap.de.
Ihr benötigt den Code-Editor zum Einfügen von externem Code.

Hier ein weiteres Beispiel als reines CSS Modal.

Unten als Beispiel der Code für den Button und auch das "Modal" als Popup-Fenster.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalButton">
Klick mich
</button>


<div class="modal fade" id="exampleModalButton" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal Titel</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="false">×</span>
</button>
</div>
<div class="modal-body">
<p>Das ist der Body von diesem <b>Modal</b></p><p>
</p></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>

</div>
</div>
</div>
</div>

Bemerkung: seit Mobirise v4.9.7 musste ich die Höhe vom Inhalt eines jeden Modals mit einer CSS begrenzen, wie z.B.:

.modal-content {
max-height: 300px;
overflow-y: auto;
}

Automatisch öffnen /schließen

Wollt Ihr ein Modal beim Aufruf der Seite automatisch als Popup anzeigen, so könnt Ihr das Skript unten in den "Page Settings" am
"End of <body> code"
einfügen. Unten als Beispiel der Code für den Text-Link, der hier die id="exampleModalTextLink" trägt.

Um ein automatisches Öffnen temporär abzustellen, könnt Ihr anstelle von modal('show') dann modal('hide') schreiben.

automatisch öffnen:

<script>
$(window).load(function() {
$('#exampleModalTextLink').modal('show');
});
</script>

automatisch schließen (hier nach 10 Sekunden):

<script>
setTimeout(function() {
$('#exampleModalTextLink').modal('hide');
}, 10000);
</script>

Mit Textlink schließen

Wollt Ihr ein Modal, anstelle des Buttons, nur mit einem Textlink schließen, wie ich es beim ersten Icon hier gemacht habe, dann verwendet ihr z.B. einen Link wie unten:

<p><a style="color: blue;" href="javascript:location.reload();" data-dismiss="modal" title="Modal schließen">Schließen</a></p>

Mobirise Tutorials

Dieser Footer wurde mit dem "global" Attribut versehen
und muss somit nur einmalig in diesem Projekt geändert werden.
Das funktioniert nur bei der Menüleiste und beim Footer.