flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Popup modal


Introductie

Met CSS Framework kun je een pop-up scherm maken met de modal class.


Klik op de Class naam om deze te kopiƫren.

popup Hoofd class voor de pop-up
popup-inner Class voor de inhoud van de pop-up
popup-close Class voor de sluit knop

De pop-ups gebruiken ook hun eigen attributen:

Klik op de Class naam om deze te kopiƫren.

data-popup-open="popup-name" Attribuut voor het openen van de pop-up met specifieke naam
data-popup="popup-name" Attribuut voor de pop-up, het heeft dezelfde naam als het openings attribuut
data-popup-close="popup-name" Attribuut voor het sluiten van de pop-up


Voorbeeld

Open Popup #1 Open Popup #2

Voorbeeldcode:

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

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

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


© Copyright by Web Henkie
All right reserved
Webmaster