Modal
Overview
The Style Kit includes a customised version of the Bootstrap modal plugin to be compatible with Style Kit specific classes. It’s functionality and data API remain exactly the same.
Dependencies
This plugin depends upon:
See distribution for how to include these dependencies.
Uses
Modals can be useful for drawing the users attention to something, such as a time limit for booking a ticket.
In most cases modals should be avoided as they are hard to make accessible and do not work well on mobiles or small devices, especially where there is lots of content.
For highlighting information, consider using the Alert component instead. For confirming an action, consider using a standard JavaScript confirm, as these have native browser and device support, or taking users to a separate page.
Examples
<!-- trigger -->
<button class="bsk-btn bsk-btn-default" type="button" data-toggle="modal" data-target="#example-modal">Trigger modal</button>
<!-- modal -->
<div class="bsk-modal bsk-fade" id="example-modal" tabindex="-1" role="dialog">
<div class="bsk-modal-dialog" role="document">
<div class="bsk-modal-content">
<header class="bsk-modal-header">
<button class="bsk-close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="bsk-h4 bsk-modal-title">Your booking will expire in 24 minutes</div>
</header>
<div class="bsk-modal-body">
<p>Your tickets are only reserved for a limited time until paid for. If your booking expires you will need to start again.</p>
</div>
<footer class="bsk-modal-footer">
<button class="bsk-btn bsk-btn-primary" type="button" data-dismiss="modal">Continue</button>
</footer>
</div>
</div>
</div>This example uses header classes instead of elements to avoid issues with the automatic table of contents.