Modal

wd_s comes with a modal out of the box. It is packaged with basic styles.

To utilize the modal, you first need a modal trigger. This can be achieved with any type of actionable trigger, like a button:

<button class="modal-trigger" data-target="#modal-one">Launch Modal</button>

The data-target value must correspond to the ID of an element on the same page. For instance, this div:

<div class="modal" id="modal-one" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
    <div class="modal-dialog" role="document">

        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-target="#modal-one">Close</button>
                <h3 class="modal-title" id="modal-title">Modal</h3>
            </div>
            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus gratiam. In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. Quid de Platone aut de Democrito loquar? Duo Reges: constructio interrete. Bonum negas esse divitias, praeposìtum esse dicis? </p>
            </div>
            <div class="modal-footer">
                <p>Modal Footer</p>
            </div>
        </div><!-- .modal-content -->
    </div><!-- .modal-dialog -->
</div><!-- .modal -->

Multiple modals can be used on the same page as long as you remember to set the data-target of your trigger and the ID of the corresponding container to match.