Let's have fun
Let's have fun
Modal
Info
With the modal classes of this framework you can display content via a popup screen.
The modal
The data code for the button or link to open the modal:
data-modal-open="m1"
<button class="button" data-modal-open="m1">Open modal 1</button> <a href="javascript:void(0)" data-modal-open="m1">Open modal 1</a>
Where m1 is the code for the modal to be opened, so it must always be unique!
The data codes for the modal:
data-modal="m1"
data-modal-close="m1"
<div class="modal" data-modal="m1"> <a class="modal-close" data-modal-close="m1" href="javascript:void(0);"></a> </div>
Notice that the modal code m1 is the same as the open links.
The classes of the modal:
modal
modal-inner
modal-close
<div class="modal" data-modal="m1">
<div class="modal-inner">
<h2>Modal 1</h2>
<p>Tekst</p>
<img alt="" src="">
<p class="text-center"><button class="button" data-modal-close="m1">Close</button></p>
<a class="modal-close" data-modal-close="m1" href="javascript:void(0);"></a>
</div>
</div>
Modal Colors
To change the color of a modal, add a color-* color class to the modal-inner section. You can also change the color of a button by using a button-* color class.
Example:
<button class="button button-green" data-modal-open="cm1">color-green</button>
<div class="modal" data-modal="cm1">
<div class="modal-inner color-green">
<h2>color-green</h2>
<p>Tekst</p>
<p class="text-center"><button class="button button-orange" data-modal-close="cm1">Close</button></p>
<a class="modal-close" data-modal-close="cm1" href="javascript:void(0);"></a>
</div>
</div>