This modal is an example created using shorthand classes. There is no shorthand class of modal box
.modal
class and jquery used in this example is not a part of the framework. We used it for demonstration purpose only. You can either use it or can write your own.
<!-- modal button -->
<button class="button" data-toggle="modal" data-target="#modal-one">Open Modal</button>
<!-- modal -->
<div id="modal-one" class="modal hidden absolute-full fixed z-10000 bg-black-50 ease-900">
<div class="bg-white mx-auto mt-l5 w-50pc border br-8 overflow-hidden">
<div class="px-5 py-3 bg-gray-lightest flex justify-between items-center border-b">
<h3 class="black opacity-80">Title</h3>
<button data-dismiss="modal" class="button p-0 bg-transparent gray after-times-large"></button>
</div>
<div class="px-5 py-10 fs-s1">
This is an awesome modal box.
</div>
<div class="px-5 py-3 border-t flex justify-between items-center">
<button data-dismiss="modal" class="button bg-black">I Agree</button>
<button data-dismiss="modal" class="button bg-gray-lightest gray"> close</button>
</div>
</div>
</div>
<!-- jquery to open and close modal-->
<script>
$(document).on('click', '[data-toggle=modal]', function () {
$($(this).attr('data-target')).toggleClass('hidden');
});
$(document).on('click', '[data-dismiss=modal]', function () {
$(this).closest('.modal').toggleClass('hidden');
});
</script>
<!-- modal button -->
<button class="button" data-toggle="modal" data-target="#modal-two">Open Modal</button>
<!-- modal -->
<div id="modal-two" class="modal hidden absolute-full fixed z-1000 bg-black-50 ease-900">
<div class="relative bg-white mx-auto mt-l5 w-90pc md-w-50pc border br-8 overflow-hidden">
<button data-dismiss="modal" class="absolute button p-0 m-4 top-0 right-0 bg-transparent indigo-lighter fs-l2 lh-0 flex justify-center fw-100">×</button>
<div class="px-3 py-10 md-px-10 md-py-l5">
<div class="fs-s1 text-center w-70pc mx-auto">
<h3 class="fs-m5 my-3 indigo-darkest fw-400">Subscribe to newsletter</h3>
<p class="black opacity-70 lh-5">We're giving away a free product to every 10th subscriber. Subscribe to enter the giveaway.
</p>
</div>
<div class="px-5 py-3 w-80pc mx-auto text-center">
<input class="input-lg full my-4 fs-s2 br-0" type="email" placeholder="Email Address">
<button class="button-lg full bg-indigo fs-s2 br-0">Subscribe</button>
</div>
</div>
</div>
</div>
<!-- jquery to open and close modal-->
<script>
$(document).on('click', '[data-toggle=modal]', function () {
$($(this).attr('data-target')).toggleClass('hidden');
});
$(document).on('click', '[data-dismiss=modal]', function () {
$(this).closest('.modal').toggleClass('hidden');
});
</script>