<

Voyager
Voyager

Modals

Modals are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards.

HTML Copy 

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sampleModal"> Launch demo modal </button>
<div class="modal fade" id="sampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content qw-modal">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Variants

Sizes

Modals have four size options. Pick the size based on the content in the modal. Add the size class, i.e. .qw-modal-sm, to the .modal-dialog to set the modal size. The default size is Medium

HTML Copy 

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sampleModal"> Launch demo modal </button>
<div class="modal fade" id="sampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog qw-modal-sm" role="document">
        <div class="modal-content qw-modal">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Small modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Hero Modals

Use Hero Modals when you need that little extra…something to guide or direct a user. Add .qw-modal-hero to the .qw-modal.

HTML Copy 

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sampleModal"> Launch demo modal </button>
<div class="modal fade" id="sampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content qw-modal qw-modal-hero">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>