jQuery Mobile Popups
Ein Popup ist ein sehr beliebtes Dialogfeld, das überlagert auf der Seite eingeblendet werden kann.
Popups können verwendet werden, um Text, Bilder, Karten oder andere Inhalte anzuzeigen.
Um ein Popup zu erstellen, verwenden Sie die Elemente <a> und <div>. Fügen Sie dem <a>-Element das Attribut data-rel="popup" hinzu und dem <div>-Element das Attribut data-role="popup". Geben Sie dann eine id für das <div> an und setzen Sie das href des <a> auf die für das <div> angegebene id. Der Inhalt innerhalb des <div> ist das, was das Popup anzeigt.
Hinweis:Das <div>-Popup und der angeklickte <a>-Link müssen sich auf derselben Seite befinden.
Beispiel
<div data-role="popup" id="myPopup">
<p>Dies ist ein einfaches Popup</p>
</div>
Selbst ausprobieren »
Wenn Sie dem Popup Innenabstand und Außenabstand hinzufügen müssen, fügen Sie die Klasse "ui-content" zum <div> hinzu:
Popup schließen
Standardmäßig wird das Popup geschlossen, wenn Sie außerhalb des Popup-Bereichs klicken oder die Taste "Esc" drücken. Wenn Sie nicht möchten, dass das Popup beim Klicken außerhalb geschlossen wird, fügen Sie das Attribut data-dismissible="false" hinzu (nicht empfohlen). Sie können dem Popup auch eine Schließen-Schaltfläche hinzufügen. Verwenden Sie das Attribut data-rel="back" an der Schaltfläche und steuern Sie die Position der Schaltfläche mit Stilen.
| Beschreibung | Beispiel |
|---|---|
| Rechte Schließen-Schaltfläche | Selbst ausprobieren |
| Linke Schließen-Schaltfläche | Selbst ausprobieren |
| Verwendung des Attributs data-dismissible | Selbst ausprobieren |
Popup positionieren
Standardmäßig wird das Popup direkt über dem angeklickten Element angezeigt. Um die Popup-Position zu steuern, verwenden Sie das Attribut data-position-to am Klick-Link, der zum Öffnen des Popups verwendet wird.
Drei Möglichkeiten, die Popup-Position zu steuern:
| Attributwert | Beschreibung |
|---|---|
| data-position-to="window" | Das Popup wird im Fenster zentriert |
| data-position-to="#myId" | Das Popup wird auf dem bekannten #id-Element angezeigt |
| data-position-to="origin" | Standard. Das Popup wird auf dem angeklickten Element angezeigt. |
Beispiel
<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo">id="demo"</a>
<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin">Ursprung</a>
Selbst ausprobieren »
Übergänge
Standardmäßig haben Popups keinen Übergangseffekt. Bei Bedarf können Sie Übergänge mit dem Attribut data-transition="value" hinzufügen (jQuery Mobile Übergänge）：
Alle Übergangsbeispiele
Selbst ausprobieren »
Popup-Pfeilränder
Um dem Popup einen Richtungspfeilrahmen hinzuzufügen, verwenden Sie das data-arrow-Attribut mit dem Wert "l" (links), "t" (oben), "r" (rechts) oder "b" (unten):
Beispiel
<div data-role="popup" id="myPopup" class="ui-content" data-arrow="l">
<p>Richtung des linken Rahmens.</p>
</div>
Selbst ausprobieren »
Popup-Dialog
Sie können ein Standard-Dialog-Popup erstellen (Header-, Inhalts- und Footer-Markup):
Beispiel
<div data-role="popup" id="myPopupDialog">
<div data-role="header"><h1>Header-Text..</h1></div>
<div data-role="main" class="ui-content"><p>Ein wenig Text..</p><a href="#">Ein Link..</a>
<div data-role="footer"><h1>Fußzeilentext..</h1></div>
</div>
Selbst ausprobieren »
Bild-Popup
Sie können Bilder in einem Popup anzeigen:Beispiel
<img src="/wp-content/uploads/2015/10/example.jpeg" alt="Beispiel" style="width:200px;"></a>
<div data-role="popup" id="myPopup">
<img src="/wp-content/uploads/2015/10/example.jpeg" style="width:800px;height:400px;" alt="Beispiel">
</div>
Selbst ausprobieren »
Popup-Hintergrund-Overlay
Sie können das Attribut data-overlay-theme verwenden, um eine Hintergrundfarbe hinter dem Popup hinzuzufügen.
Standardmäßig ist der Overlay-Hintergrund transparent. Verwenden Sie data-overlay-theme="a", um einen hellen Hintergrund hinzuzufügen, und verwenden Sie data-overlay-theme="b", um einen dunklen Overlay-Hintergrund hinzuzufügen:
Beispiel
<div data-role="popup" id="myPopup" data-overlay-theme="b">
<p>Hinter mir ist ein dunkler Hintergrund.</p>
</div>
Selbst ausprobieren »
Bild-Popups verwenden oft Hintergrund-Overlays:
Beispiel
<img src="/wp-content/uploads/2015/10/example.jpeg" alt="Beispiel" style="width:200px;"></a>
<div data-role="popup" id="myPopup" data-overlay-theme="b">
<img src="/wp-content/uploads/2015/10/example.jpeg" style="width:800px;height:400px;" alt="Beispiel">
</div>
Selbst ausprobieren »
Hinweis:In den folgenden Kapiteln erfahren Sie, wie Sie Formulare in Popups verwenden.
Andere Erweiterungen