jQuery Mobile Popups

Die Grundlagen

Um einen Popup aufzurufen, müssen zwei Voraussetzungen erfüllt sein:

  1. Es muss ein Element mit data-role="popup" geben und
  2. Dieses Element muss mit einem Link und data-rel="popup" im Link aufgerufen werden.

Die Grundstruktur eines einfachen Popups mit Aufruf sieht dann so aus:

<a href="#popupBasic" data-rel="popup">Popup mit Basiseinstellungen öffnen</a>
<div data-role="popup" id="popupBasic">
  <p>Popup mit Basiseinstellungen ohne irgendwelche Optionen.<p>
</div><!-- Ende popupBasic -->

Popups werden wieder geschlossen, wenn der Besucher der Homepage auf einen Bereich außerhalb des Popups klickt. Das erscheint aber oft nicht so selbstverständlich. Daher sollte man in Erwägung ziehen, einen Close-Button einzufügen. Das kann zum Beispiel durch diesen Code im Popup realisiert werden:

<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext"></a>

Die Positionierung des Popups in der Nähe des aufrufenden Links empfinde ich oft nicht besonders sinnvoll. Doch das kann man einfach ändern, in dem man beim aufrufenden Link data-position-to="window" mitgibt.

Demo Grundlagen Popups

Popups zur Anzeige von Bildern nutzen

Popups sind auch eine sehr gute Möglichkeit, um mit jQuery Mobile Bilder anzuzeigen. Natürlich kann man Bilder auch direkt in eine jQuery-Mobil-Seite einbinden. Das wirkt aber nicht besonders elegant, vor allem weil es dann keine automatische Größenanpssung gibt. Die Einbindung in ein Popup ist ganz einfach. Wie man am Beispiel Popups mit Bildern sehen kann, besteht auch hier die Möglichkeit, zum Einblenden unterschiedliche Effekte einzusetzen (z.B. data-transition="flip"). In den meisten Fällen dürfte es sinnvoll sein, die Grafik mit data-position-to="window" im sichtbaren Bildschirmbereich zu zentrieren. Den Button zum Schließen des Popups sollte man mit class="ui-btn-left" oder class="ui-btn-right" positionieren. Der gesamt Quellcode des Beispiels (Content-Bereich) sieht so aus:

<div data-role="content">
  <p>Einfach ein Bild:</p>
  <img src="url-zum-Bild" title="Titeltext" alt="alternativer Text">
  <p>Hier wird demonstriert, wie man Bilder in Popups einbindet.</p>
  <!-- Verlinkung -->
  <p><a href="#popupPositiontowindow" data-rel="popup" data-position-to="window">Positioniertes Popup mit Bild öffnen</a></p>
  <p><a href="#popupSlidedown" data-rel="popup" data-position-to="window" data-transition="slidedown">Bild mit Slidedown einblenden</a></p>
  <p><a href="#popupFlip" data-rel="popup" data-position-to="window" data-transition="flip">Bild mit Flip einblenden</a></p>
  <!-- Versteckter Inhalt mit den Bildern-->
  <div data-role="popup" id="popupPositiontowindow">
   <a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext"></a>
    <img src="url-zum-Bild" title="Titeltext" alt="alternativer Text">
  </div><!-- Ende popupPositiontowindow -->
  <div data-role="popup" id="popupSlidedown" data-overlay-theme="a" data-corners="false" data-tolerance="15,15" >
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
    <img src="url-zum-Bild" title="Titeltext" alt="alternativer Text">
  </div><!-- Ende popupSlidedown -->
  <div data-role="popup" id="popupFlip" data-overlay-theme="a" data-corners="true" data-tolerance="100,100" >
    <a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-left"></a>
    <img src="url-zum-Bild" title="Titeltext" alt="alternativer Text">
  </div><!-- Ende popupFlip -->
</div><!-- Ende content -->

Diese hier vorgestellte Möglichkeit zielt immer darauf ab, wenige Einzelbilder mit jQuery Mobile darzustellen. Die Anzeige von Grafiken in Galerieform wird durch jQuery Mobile in der Ursprungsvariante nicht unterstützt, aber es gibt hierfür das Plugin Photoswipe.