nl flag
logo

Popup Modal

Open de popup schermen via buttons.


<a class="btn" data-modal-open="modal-1" href="#">Open popup #1</a>
<a class="btn" data-modal-open="modal-2" href="#">Open popup #2</a>

<div class="modal" data-modal="modal-1" data-modal-close="modal-1">
  <div class="modal-inner">
    <h2>Wauw! Dit is geweldig! (popup #1)</h2>
    <p>Tekst</p>
    <p><a data-modal-close="modal-1" href="#">Sluiten</a></p>
    <a class="modal-close" data-modal-close="modal-1" href="#"></a>
  </div>
</div>

<div class="modal" data-modal="modal-2" data-modal-close="modal-2">
  <div class="modal-inner">
    <h2>Wauw! Dit is geweldig! (popup #2)</h2>
    <p>Tekst</p>
    <p><a data-modal-close="modal-2" href="#">Sluiten</a></p>
    <a class="modal-close" data-modal-close="modal-2" href="#"></a>
  </div>
</div>

Open de popup schermen via tekst of afbeeldingen

Tekst Open popup #1 tekst

<p>Tekst <a href="#" data-modal-open="modal-1">Open popup #1</a> tekst</p>

Open popup #1

<p data-modal-open="modal-1">Open popup #1</p>
<img class="image image-center image-hover" data-modal-open="modal-1" src="" />