Modal dialoog

Met de modal class van dit framework kunt u inhoud weergeven via een pop-upscherm.


Modal 1

foto

Modal 2

Knoppen Modal 1 en 2

<button class="button" data-modal-open="m1">Open modal 1</button>
<button class="button" data-modal-open="m2">Open modal 2</button>

Modal 1

<div class="modal" data-modal="m1">
  <div class="modal-inner">
    <h2>Modal 1</h2>
    <p>Tekst</p>
    <img alt="" class="image image-center" src="">
    <div class="txt-center"><button class="button color-secondary" data-modal-close="m1">Close</button></div>
    <a class="modal-close" data-modal-close="m1" href="javascript:void(0);"></a>
  </div>
</div>

Modal 2

<div class="modal" data-modal="m2">
  <div class="modal-inner">
    <h2>Modal 2</h2>
    <p>Tekst</p>
    <div class="txt-center"><button class="button color-secondary" data-modal-close="m2">Close</button></div>
    <a class="modal-close" data-modal-close="m2" href="javascript:void(0);"></a>
  </div>
</div>

Kleurpalet

Klik op een kleur om de modal te wijzigen en de code zichtbaar te maken!