Foundation Modal

Ein Modal ist ein Popup, das oben auf der Seite erscheint.

Wir können an einem Container-Element (wie z. B.<div id="myModal") eine eindeutige ID verwenden und hinzufügen.reveal-modalKlasse unddata-revealVerwenden Sie das Attribut, um ein Modal hinzuzufügen. Wir können es bei jedem Element verwenden.data-reveal-id="id"ein Attribut zum Öffnen des Modals.idEs muss mit der Container-ID übereinstimmen (zum Beispiel "myModal").

Wenn Sie das Modal schließen möchten, indem Sie auf den Bereich außerhalb davon klicken, können Sie die Schließen-Schaltfläche des Modals verwenden.<a>Zum Tag hinzufügen.close-reveal-modalclass zum Implementieren.

Hinweis:Der Slider erfordert JavaScript. Sie müssen also Foundation JS initialisieren:

Beispiel

<!-- Modal auslösen -->
<button type="button" class="button" data-reveal-id="myModal">Zum Öffnen des Modals klicken</button>

<!-- Der Modal-Inhalt -->
<div id="myModal" class="reveal-modal" data-reveal>
  <h2>Überschrift im Modal.</h2>
  <p>Ein wenig Text im Modal.</p>
  <p>Ein wenig Text im Modal.</p>
  <a class="close-reveal-modal">&times;</a>
</div>

<!-- Foundation JS initialisieren -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

Selbst ausprobieren »

Modal-Größe

Sie können die folgenden Klassen zum Modal-Container hinzufügen, um die Größe des Modals festzulegen:

  • .tiny: 30% Breite
  • .small: 40% Breite
  • .medium: 60% Breite
  • .large: 70% Breite
  • .xlarge: 95% Breite
  • .full: 100% Breite und Höhe

Hinweis:Die Standardbreite beträgt 80% auf Tablets, Laptops und PCs und 100% Breite auf Geräten mit kleinem Bildschirm.

Beispiel

<div id="myModal" class="reveal-modal tiny|small|medium|large|xlarge|full" data-reveal>

Selbst ausprobieren »

Eingebettetes Modal

Sie können ein Modal in ein Modal einbetten und dem ersten Modal eine neue Auslöser-Schaltfläche hinzufügen. Sie müssen eine eindeutige ID für das eingebettete Modal festlegen:

Beispiel

<!-- Modal auslösen -->
<a href="#" class="button" data-reveal-id="myModal">Klicken zum Öffnen des Modals</a>

<!-- Das erste Modal -->
<div id="myModal" class="reveal-modal" data-reveal>
  <h2>Erstes Modal</h2>
  <p>Etwas Text..</p>
  <p><a href="#" data-reveal-id="secondModal" class="button">Zweites Modal öffnen</a></p>
  <a class="close-reveal-modal">&times;</a>
</div>

<!-- Das zweite Modal -->
<div id="secondModal" class="reveal-modal" data-reveal>
  <h2>Tada! Zweites Modal</h2>
  <p>Etwas Text..</p>
  <a class="close-reveal-modal">&times;</a>
</div>

Selbst ausprobieren »

Das zweite Modal ersetzt das erste Modal. Wenn das erste Modal nicht geschlossen werden soll, wenn das zweite Modal geöffnet wird, können Sie es dem zweiten Modal hinzufügen.data-options="multiple_opened:true;"Attribute:

Beispiel

<div id="secondModal" class="reveal-modal" data-reveal data-options="multiple_opened:true;">

Selbst ausprobieren »
Weitere Erweiterungen