Zum Inhalt springen
Handbuch wien.gv.at
Startseite wien.gv.at

Modal
Varianten

Modal Lightbox

Lightbox mit Bild

 Vorschau Luftbildaufnahme See und Wohngebäude in der Seestadt Code 
<a href="/images/pattern/sonstige/1070/aspern-seestadt-von-oben.jpeg" data-modal="image">
  <img src="/images/pattern/cards/aspern-seestadt-von-oben.webp" width="530" height="298" alt="Luftbildaufnahme See und Wohngebäude in der Seestadt">
</a>

Lightbox mit Bild und Beschreibung

 Vorschau
Kleine, gärtnerische Fläche zwischen Wohnhäusern
WILD im WEST
Code 
<figure>
  <a href="/images/pattern/modal/modal3.jpg" data-modal="image">
    <img src="/images/pattern/modal/modal3.jpg" width="530" height="298" loading="lazy" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern">
  </a>
  <figcaption>
    WILD im WEST
  </figcaption>
</figure>

Lightbox mit mehreren Bildern und Einzelbild-Vorschau

 Vorschau Platz mit Brunnen Code 
<a href="/images/pattern/modal/modal1.jpg" data-modal="images-thumbs" data-thumbs="thumbs">
  <img src="/images/pattern/modal/modal1.jpg" width="530" height="298" loading="lazy" alt="Platz mit Brunnen">
</a>
<template id="images-thumbs">
  <wm-carousel hidedots="hideDots" single="1070" style="--carousel-shadow-offset: 0px" label="Bilder">
    <figure class="image">
      <img src="/images/pattern/modal/modal1.jpg" width="340" height="456" loading="lazy" alt="Platz mit Brunnen">
      <figcaption>
        Das ist meine Beschreibung
      </figcaption>
    </figure>
    <figure class="image">
      <img src="/images/pattern/modal/modal2.jpg" width="340" height="456" loading="lazy" alt="Luftbild mit Abgrenzung des Bearbeitungsgebiets">
      <figcaption>
        Das ist meine Beschreibung etwas längere Beschreibung, die mobil zum Thema werden könnte
      </figcaption>
    </figure>
    <figure class="image">
      <img src="/images/pattern/modal/modal3.jpg" width="1070" height="602" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern">
      <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae dolores at ipsa voluptate earum assumenda facilis quos, aut itaque sapiente sit numquam, beatae temporibus dolore expedita dolorem quibusdam similique distinctio?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae dolores at ipsa voluptate earum assumenda facilis quos, aut itaque sapiente sit numquam, beatae temporibus dolore expedita dolorem quibusdam similique distinctio?</p>
      </figcaption>
    </figure>
    <figure class="image">
      <picture>
        <img src="/images/pattern/modal/modal4.jpg" width="340" height="456" loading="lazy" alt="Erhöhter Platz mit Bäumen">
      </picture>
    </figure>
    <figure class="image">
      <picture>
        <img src="/images/pattern/modal/modal5.jpeg" width="1000" height="1341" loading="lazy" alt="Brücke über Gleise">
      </picture>
    </figure>
    <figure class="image">
      <img src="/images/pattern/modal/modal6.jpeg" width="1070" height="602" alt="Markthäuschen">
    </figure>
  </wm-carousel>
</template>
<template id="thumbs">
  <img src="/images/pattern/modal/thumbs/modal1.jpg" width="44" height="44" alt="Platz mit Brunnen">
  <img src="/images/pattern/modal/thumbs/modal2.jpg" width="44" height="44" alt="Luftbild mit Abgrenzung des Bearbeitungsgebiets">
  <img src="/images/pattern/modal/thumbs/modal3.jpg" width="44" height="44" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern">
  <img src="/images/pattern/modal/thumbs/modal4.jpg" width="44" height="44" alt="Erhöhter Platz mit Bäumen">
  <img src="/images/pattern/modal/thumbs/modal5.jpg" width="44" height="44" alt="Brücke über Gleise">
  <img src="/images/pattern/modal/thumbs/modal6.jpg" width="44" height="44" alt="Markthäuschen">
</template>

Lightbox mit mehreren Bildern und Rasterbild-Vorschau

 Vorschau Code 
<wm-gallery>
  <ul>
    <li>
      <a href="" data-modal="gallery-images" data-thumbs="gallery-thumbs">
        <img src="/images/pattern/modal/modal3.jpg" width="1070" height="602" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern">
      </a>
    </li>
    <li>
      <a href="" data-modal="gallery-images" data-modal-pos="1" data-thumbs="gallery-thumbs">
        <img src="/images/pattern/modal/modal4.jpg" width="340" height="456" loading="lazy" alt="Erhöhter Platz mit Bäumen">
      </a>
    </li>
    <li>
      <a href="" data-modal="gallery-images" data-modal-pos="2" data-thumbs="gallery-thumbs">
        <img src="/images/pattern/modal/modal5.jpeg" width="1000" height="1341" loading="lazy" alt="Brücke über Gleise">
      </a>
    </li>
  </ul>
</wm-gallery>

<template id="gallery-images">
  <wm-carousel hidedots="hideDots" single="1070" style="--carousel-shadow-offset: 0px" label="Bilder">
    <div class="image">
      <img src="/images/pattern/modal/modal3.jpg" width="1070" height="602" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern">
    </div>
    <div class="image">
      <img src="/images/pattern/modal/modal4.jpg" width="340" height="456" loading="lazy" alt="Erhöhter Platz mit Bäumen">
    </div>
    <div class="image">
      <img src="/images/pattern/modal/modal5.jpeg" width="1000" height="1341" loading="lazy" alt="Brücke über Gleise">
    </div>
  </wm-carousel>
</template>
<template id="gallery-thumbs">
  <img src="/images/pattern/modal/thumbs/modal3.jpg" width="44" height="44" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern">
  <img src="/images/pattern/modal/thumbs/modal4.jpg" width="44" height="44" alt="Erhöhter Platz mit Bäumen">
  <img src="/images/pattern/modal/thumbs/modal5.jpg" width="44" height="44" alt="Brücke über Gleise">
</template>

Lightbox mit Multimedia

 Vorschau

Marathon-Weltrekordversuch in Wien

Wien wird im Oktober 2019 zum Schauplatz für ein einzigartiges Sportereignis, das weltweite Aufmerksamkeit auf sich zieht.
7 Personen (6 Politiker, 1 Sportler), posieren für die Kamera. Code 
<wm-card size="m" data-modal="cardvideo" blocklink video>
    <h3 slot="heading">
      <a href="#">Marathon-Weltrekordversuch in Wien</a>
    </h3>
    <div slot="content">
      Wien wird im Oktober 2019 zum Schauplatz für ein einzigartiges Sportereignis, das weltweite Aufmerksamkeit auf sich zieht.
    </div>
    <img slot="media" src="https://www.wien.gv.at/video/assets/videos/2387/Poster.jpg" title="Marathon-Weltrekordversuch in Wien" alt="7 Personen (6 Politiker, 1 Sportler), posieren für die Kamera.">
  </wm-card>
  <template id="cardvideo">
  <iframe allowfullscreen="allowfullscreen" width="600" scrolling="auto" loading="lazy" src="https://www.wien.gv.at/video/embed/index.html?mid=2387" title="Marathon-Weltrekordversuch in Wien">
    <a href="https://www.wien.gv.at/video/embed/index.html?mid=2387">
      Marathon-Weltrekordversuch in Wien
    </a>
  </iframe>
</template>

Lightbox mit ViennaViz Grafik

 Vorschau Code 
<button data-modal="viennaviz">ViennaViz zeigen</button>
<template id="viennaviz">
  <wm-tabs>
  <wm-tab slot="tab">Chart</wm-tab>
  <wm-tabpanel>
    <wm-stack grow equal>
      <figure>
        <div class="viennaviz-container" style="overflow: hidden; padding-top: 77%; position: relative;">
          <iframe
            src="https://stp.wien.gv.at/viennaviz/anonymous/embed.html?id=d043bf84-dd58-4947-9dc8-538894993480&status=published"
            name="ViennaViz Visualisierung"
            style="border: 0; height: 100%; left:0; position: absolute; top: 0; width: 100%;">
            <p>Keine Unterstützung für iframes in Ihrem Browser</p>
          </iframe>
        </div>
        <figcaption class="image-caption">
          Beispiel für ein ViennaViz-Diagramm
        </figcaption>
        </figure>
    </wm-stack>
  </wm-tabpanel>
  <wm-tab slot="tab">Tabelle</wm-tab>
  <wm-tabpanel>
    <wm-table header="wasserblau" zebra="odd" alignment="end">
      <table>
        <thead>
          <tr>
            <th>
              <p>
                Jahr
              </p>
            </th>
            <th>
              <p>
                Wachstum (absolut)
              </p>
            </th>
            <th>
              <p>
                Geburtenbilanz
              </p>
            </th>
            <th>
              <p>
                Wanderungsbilanz (aussen & binnen)
              </p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <p>
                1961
              </p>
            </td>
            <td>
              <p>
                -3504
              </p>
            </td>
            <td>
              <p>
                -6515
              </p>
            </td>
            <td>
              <p>
                3011
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1962
              </p>
            </td>
            <td>
              <p>
                -810
              </p>
            </td>
            <td>
              <p>
                -6645
              </p>
            </td>
            <td>
              <p>
                5835
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1963
              </p>
            </td>
            <td>
              <p>
                -1401
              </p>
            </td>
            <td>
              <p>
                -6072
              </p>
            </td>
            <td>
              <p>
                4671
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1964
              </p>
            </td>
            <td>
              <p>
                -952
              </p>
            </td>
            <td>
              <p>
                -5834
              </p>
            </td>
            <td>
              <p>
                4882
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1965
              </p>
            </td>
            <td>
              <p>
                -2169
              </p>
            </td>
            <td>
              <p>
                -7681
              </p>
            </td>
            <td>
              <p>
                5512
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1966
              </p>
            </td>
            <td>
              <p>
                2009
              </p>
            </td>
            <td>
              <p>
                -6551
              </p>
            </td>
            <td>
              <p>
                8560
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1967
              </p>
            </td>
            <td>
              <p>
                3629
              </p>
            </td>
            <td>
              <p>
                -7289
              </p>
            </td>
            <td>
              <p>
                10918
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1968
              </p>
            </td>
            <td>
              <p>
                1300
              </p>
            </td>
            <td>
              <p>
                -7246
              </p>
            </td>
            <td>
              <p>
                8546
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1969
              </p>
            </td>
            <td>
              <p>
                -1439
              </p>
            </td>
            <td>
              <p>
                -9215
              </p>
            </td>
            <td>
              <p>
                7776
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1970
              </p>
            </td>
            <td>
              <p>
                -4127
              </p>
            </td>
            <td>
              <p>
                -10284
              </p>
            </td>
            <td>
              <p>
                6157
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1971
              </p>
            </td>
            <td>
              <p>
                948
              </p>
            </td>
            <td>
              <p>
                -11318
              </p>
            </td>
            <td>
              <p>
                12266
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1972
              </p>
            </td>
            <td>
              <p>
                4592
              </p>
            </td>
            <td>
              <p>
                -10684
              </p>
            </td>
            <td>
              <p>
                15276
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1973
              </p>
            </td>
            <td>
              <p>
                2236
              </p>
            </td>
            <td>
              <p>
                -10612
              </p>
            </td>
            <td>
              <p>
                12848
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1974
              </p>
            </td>
            <td>
              <p>
                -16165
              </p>
            </td>
            <td>
              <p>
                -10682
              </p>
            </td>
            <td>
              <p>
                -5483
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1975
              </p>
            </td>
            <td>
              <p>
                -15365
              </p>
            </td>
            <td>
              <p>
                -12412
              </p>
            </td>
            <td>
              <p>
                -2953
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1976
              </p>
            </td>
            <td>
              <p>
                -14585
              </p>
            </td>
            <td>
              <p>
                -13367
              </p>
            </td>
            <td>
              <p>
                -1218
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1977
              </p>
            </td>
            <td>
              <p>
                -10175
              </p>
            </td>
            <td>
              <p>
                -12770
              </p>
            </td>
            <td>
              <p>
                2595
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1978
              </p>
            </td>
            <td>
              <p>
                -17037
              </p>
            </td>
            <td>
              <p>
                -12873
              </p>
            </td>
            <td>
              <p>
                -4164
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1979
              </p>
            </td>
            <td>
              <p>
                -14050
              </p>
            </td>
            <td>
              <p>
                -11797
              </p>
            </td>
            <td>
              <p>
                -2253
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1980
              </p>
            </td>
            <td>
              <p>
                -6404
              </p>
            </td>
            <td>
              <p>
                -10953
              </p>
            </td>
            <td>
              <p>
                4549
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1981
              </p>
            </td>
            <td>
              <p>
                -6514
              </p>
            </td>
            <td>
              <p>
                -10130
              </p>
            </td>
            <td>
              <p>
                3616
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1982
              </p>
            </td>
            <td>
              <p>
                -17997
              </p>
            </td>
            <td>
              <p>
                -9626
              </p>
            </td>
            <td>
              <p>
                -8371
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1983
              </p>
            </td>
            <td>
              <p>
                -10768
              </p>
            </td>
            <td>
              <p>
                -10172
              </p>
            </td>
            <td>
              <p>
                -596
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1984
              </p>
            </td>
            <td>
              <p>
                -4992
              </p>
            </td>
            <td>
              <p>
                -9017
              </p>
            </td>
            <td>
              <p>
                4025
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1985
              </p>
            </td>
            <td>
              <p>
                -3918
              </p>
            </td>
            <td>
              <p>
                -9374
              </p>
            </td>
            <td>
              <p>
                5456
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1986
              </p>
            </td>
            <td>
              <p>
                -5472
              </p>
            </td>
            <td>
              <p>
                -8289
              </p>
            </td>
            <td>
              <p>
                2817
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1987
              </p>
            </td>
            <td>
              <p>
                -1226
              </p>
            </td>
            <td>
              <p>
                -7366
              </p>
            </td>
            <td>
              <p>
                6140
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1988
              </p>
            </td>
            <td>
              <p>
                1519
              </p>
            </td>
            <td>
              <p>
                -6077
              </p>
            </td>
            <td>
              <p>
                7596
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1989
              </p>
            </td>
            <td>
              <p>
                6859
              </p>
            </td>
            <td>
              <p>
                -4934
              </p>
            </td>
            <td>
              <p>
                11793
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1990
              </p>
            </td>
            <td>
              <p>
                10136
              </p>
            </td>
            <td>
              <p>
                -4454
              </p>
            </td>
            <td>
              <p>
                14590
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1991
              </p>
            </td>
            <td>
              <p>
                19677
              </p>
            </td>
            <td>
              <p>
                -3637
              </p>
            </td>
            <td>
              <p>
                23314
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1992
              </p>
            </td>
            <td>
              <p>
                15074
              </p>
            </td>
            <td>
              <p>
                -3471
              </p>
            </td>
            <td>
              <p>
                18545
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1993
              </p>
            </td>
            <td>
              <p>
                11913
              </p>
            </td>
            <td>
              <p>
                -2820
              </p>
            </td>
            <td>
              <p>
                14733
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1994
              </p>
            </td>
            <td>
              <p>
                -6769
              </p>
            </td>
            <td>
              <p>
                -2568
              </p>
            </td>
            <td>
              <p>
                -4201
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1995
              </p>
            </td>
            <td>
              <p>
                -3665
              </p>
            </td>
            <td>
              <p>
                -3522
              </p>
            </td>
            <td>
              <p>
                -143
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1996
              </p>
            </td>
            <td>
              <p>
                3189
              </p>
            </td>
            <td>
              <p>
                -3104
              </p>
            </td>
            <td>
              <p>
                6293
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1997
              </p>
            </td>
            <td>
              <p>
                -1316
              </p>
            </td>
            <td>
              <p>
                -2947
              </p>
            </td>
            <td>
              <p>
                1631
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1998
              </p>
            </td>
            <td>
              <p>
                1377
              </p>
            </td>
            <td>
              <p>
                -2847
              </p>
            </td>
            <td>
              <p>
                4224
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                1999
              </p>
            </td>
            <td>
              <p>
                6285
              </p>
            </td>
            <td>
              <p>
                -2826
              </p>
            </td>
            <td>
              <p>
                9111
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2000
              </p>
            </td>
            <td>
              <p>
                5419
              </p>
            </td>
            <td>
              <p>
                -2041
              </p>
            </td>
            <td>
              <p>
                7460
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2001
              </p>
            </td>
            <td>
              <p>
                17167
              </p>
            </td>
            <td>
              <p>
                -1776
              </p>
            </td>
            <td>
              <p>
                18943
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2002
              </p>
            </td>
            <td>
              <p>
                21723
              </p>
            </td>
            <td>
              <p>
                -488
              </p>
            </td>
            <td>
              <p>
                21488
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2003
              </p>
            </td>
            <td>
              <p>
                17564
              </p>
            </td>
            <td>
              <p>
                -494
              </p>
            </td>
            <td>
              <p>
                17094
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2004
              </p>
            </td>
            <td>
              <p>
                22159
              </p>
            </td>
            <td>
              <p>
                873
              </p>
            </td>
            <td>
              <p>
                19658
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2005
              </p>
            </td>
            <td>
              <p>
                19880
              </p>
            </td>
            <td>
              <p>
                713
              </p>
            </td>
            <td>
              <p>
                17181
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2006
              </p>
            </td>
            <td>
              <p>
                8797
              </p>
            </td>
            <td>
              <p>
                1316
              </p>
            </td>
            <td>
              <p>
                6772
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2007
              </p>
            </td>
            <td>
              <p>
                9975
              </p>
            </td>
            <td>
              <p>
                1060
              </p>
            </td>
            <td>
              <p>
                10809
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2008
              </p>
            </td>
            <td>
              <p>
                8914
              </p>
            </td>
            <td>
              <p>
                1673
              </p>
            </td>
            <td>
              <p>
                7445
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2009
              </p>
            </td>
            <td>
              <p>
                9860
              </p>
            </td>
            <td>
              <p>
                822
              </p>
            </td>
            <td>
              <p>
                8878
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2010
              </p>
            </td>
            <td>
              <p>
                12860
              </p>
            </td>
            <td>
              <p>
                1702
              </p>
            </td>
            <td>
              <p>
                10977
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2011
              </p>
            </td>
            <td>
              <p>
                14229
              </p>
            </td>
            <td>
              <p>
                2252
              </p>
            </td>
            <td>
              <p>
                11821
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2012
              </p>
            </td>
            <td>
              <p>
                24162
              </p>
            </td>
            <td>
              <p>
                1861
              </p>
            </td>
            <td>
              <p>
                22314
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2013
              </p>
            </td>
            <td>
              <p>
                25500
              </p>
            </td>
            <td>
              <p>
                2359
              </p>
            </td>
            <td>
              <p>
                22711
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2014
              </p>
            </td>
            <td>
              <p>
                30591
              </p>
            </td>
            <td>
              <p>
                3246
              </p>
            </td>
            <td>
              <p>
                26692
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2015
              </p>
            </td>
            <td>
              <p>
                42889
              </p>
            </td>
            <td>
              <p>
                3405
              </p>
            </td>
            <td>
              <p>
                39185
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2016
              </p>
            </td>
            <td>
              <p>
                27356
              </p>
            </td>
            <td>
              <p>
                4773
              </p>
            </td>
            <td>
              <p>
                22277
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2017
              </p>
            </td>
            <td>
              <p>
                21194
              </p>
            </td>
            <td>
              <p>
                4152
              </p>
            </td>
            <td>
              <p>
                16791
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2018
              </p>
            </td>
            <td>
              <p>
                8715
              </p>
            </td>
            <td>
              <p>
                3151
              </p>
            </td>
            <td>
              <p>
                5679
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p>
                2019
              </p>
            </td>
            <td>
              <p>
                13700
              </p>
            </td>
            <td>
              <p>
                3785
              </p>
            </td>
            <td>
              <p>
                9887
              </p>
            </td>
          </tr>
        </tbody>
      </table>
    </wm-table>
    <figcaption class="image-caption">
      Beispiel für eine Tabelle zu einem ViennaViz-Diagramm
    </figcaption>
  </wm-tabpanel>
</wm-tabs>
</template>

Sonstiges iframe

 Vorschau Code 
<button data-modal="sketch">Sketch</button>
<template id="sketch">
  <div class="sketchfab-embed-wrapper">
    <iframe width="500" title="THROTTLE BODY PLATE - 3MM THICK.fbx" frameborder="0" allowfullscreen="allowfullscreen" mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking="xr-spatial-tracking" execution-while-out-of-viewport="execution-while-out-of-viewport" execution-while-not-rendered="execution-while-not-rendered" web-share="web-share" src="https://sketchfab.com/models/9YtZ0lMNq6NZt6kA7XYDk4vcGli/embed"></iframe>
    <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
      <a href="https://sketchfab.com/3d-models/throttle-body-plate-3mm-thickfbx-9YtZ0lMNq6NZt6kA7XYDk4vcGli?utm_medium=embed&utm_campaign=share-popup&utm_content=9YtZ0lMNq6NZt6kA7XYDk4vcGli" target="_blank" style="font-weight: bold; color: #1CAAD9;">
        THROTTLE BODY PLATE - 3MM THICK.fbx
      </a>
      by
      <a href="https://sketchfab.com/jamesstill?utm_medium=embed&utm_campaign=share-popup&utm_content=9YtZ0lMNq6NZt6kA7XYDk4vcGli" target="_blank" style="font-weight: bold; color: #1CAAD9;">
        jamesstill
      </a>
      on
      <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=9YtZ0lMNq6NZt6kA7XYDk4vcGli" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
    </p>
  </div>
</template>

Dynamisch erzeugter Button

 Vorschau
Code 
<div class="dynamic-button"></div>
<template id="dynamic-content">
  <h2>Content</h2>
</template>
<script>
  document.addEventListener("DOMContentLoaded", (event) => {
    const button = document.createElement('button');
    button.textContent = "Open Modal";
    document
      .querySelector('.dynamic-button')
      .append(button)
    const modal = document.querySelector('wm-modal')
    modal.toModal(button, 'dynamic-content')
  });
</script>
Dev
  • Einmaliges Einbinden von <wm-modal size="fit-content"></wm-modal> zum Beispiel oberhalb des <footer> notwendig.
  • Links zu Bildern mit data-modal="image" öffnen automatsch in einem Modal.
  • Links zu Bildern in einem figure geschachtelt übernehmen automatisch den Inhalt aus der figcaption.
  • Links oder Buttons mit data-label definieren einen benutzerdefinierten Accessible Name für den Dialog.
  • Um HTML-Content anzuzeigen, übergibt man dem data-modal Attribut eine id, die auf einem passenden <template> liegt.
  • Um Thumbs anzuzeigen, data-thumbs auf den Link oder Button legen. Der Wert ist eine id, die auf einem passenden <template> liegt und die Thumbs beinhaltet.

Interaktive Demo

Vorschau
Platz mit Brunnen
Kardinal-Rauscher-Platz
Code 
<figure>
  <a href="/images/pattern/modal/modal1.jpg" data-modal="image">
    <img src="/images/pattern/modal/modal1.jpg" width="530" height="298" alt="Platz mit Brunnen">
  </a>
  <figcaption>
    Kardinal-Rauscher-Platz
  </figcaption>
</figure>

Weitere Beispiele

Dialog

 Vorschau Code 
<button data-modal="dialog">
  Löschen
</button>

<template id="dialog">
  <h1 class="wm-e-h3">Stadt Wien Konto</h1>
  <p>Wollen Sie wirklich alle Profil-Daten und Ihr Profil unwiderruflich löschen?</p>

  <wm-stack justify="space-between">
    <wm-button kind="secondary">
      <button> Abbrechen </button>
    </wm-button>
    <button> Löschen </button>
  </wm-stack>
</template>
API

Abhängigkeiten

HTML 
<script src="https://assets.wien.gv.at/theme/latest/js/components/Modal/Modal.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Button/Button.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Icon/Icon.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Details/Details.js" type="module"></script>
 JavaScript 
import { Modal } from './wienermelange/assets/js/components/Modal/Modal.js';
    import { Button } from './wienermelange/assets/js/components/Button/Button.js';
    import { Icon } from './wienermelange/assets/js/components/Icon/Icon.js';
    import { Details } from './wienermelange/assets/js/components/Details/Details.js';

Eigenschaften

Eigenschaften
Eigenschaft Beschreibung Werte Default
isopen Ist Modal geöffnet oder nicht. Boolean false
size Art der Größe 'fit-content'|'max-content' "fit-content"
captionLabel Label für "bildbeschreibung" String "Bildbeschreibung"

Methoden

Eigenschaft Optionen Argumente
toModal Alternative zum data-modal Attribut. Hilfreich bei dynamisch erzeugten Buttons. Link oder Button (node)
Element, dessen HTML-Inhalt man im Modal anzeigen möchte (node)
open Modal öffnen
close Modal schließen /

Events

Event Beschreibung Rückgabewert
wm-modal-closed Wenn das Modal geschlossen wurde.
wm-modal-opened Wenn das Modal geöffnet wurde.

CSS API

Property Beschreibung
--modal-max-width Maximalbreite
--modal-button-background-color Hintergrundfarbe des Buttons
--modal-button-border-color Rahmenfarbe des Buttons
--modal-button-background-image Hintergrundbild des Buttons
--modal-caption-padding Caption Innenabstand
--modal-close-button-background-color Hintergrundfarbe des Schließen-Buttons
--modal-thumb-outline-color Farbe der Outline um Thumbs
--modal-padding-block-end Innenabstand unten
--modal-padding-block-start Innenabstand oben
--modal-slide-background-color Hintergrundfarbe eines Slides

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at