Modal

Beispiele für Bootstrap Modal und Sticky

Popup Layer Fenster für Dialoge

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.

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

<!-- Button Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalButton">
  Klick mich
</button>
<!-- Modal -->
<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>
        <!-- <button type="button" class="btn btn-primary">Button</button> -->
      </div>
    </div>
  </div>
</div>

Automatisch öffnen

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.

  <script>
    $(window).load(function(){
        $('#exampleModalTextLink').modal('show');
    });
  </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>

PortfolioM4


Counter Statistik