CNVS

Modals

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Table of Contents

Use the class .modal in combination with one or more nested layout components to quickly create a new modal. Below is an example of simple modal with a header, body, and footer.

Join Our Mailing List

Stay updated on the latest news and releases from CNVS. Join our mailing list today. We hate spam too.

Submit Close

Example

Use a button or link to trigger the display of a modal. CNVS uses the class .fade to hide the modal. Adding the class .in to .fade will display the modal in. You can easily override these class styles to create unique keyframe sequences for your project.

Show Modal 
<a href="#" class="button" data-toggle="modal" data-target="#myModal">Show Modal</a>

<div class="modal fade" id="myModal">
  …
</div>

Modal Structure

To create a new modal use the .modal class. A modal is composed of 3 primary sections, all of which are optional and can be used interchangeably – .modal-header, .modal-body, and .modal-footer. Looking for just the body and footer? It’s as simple as not including .modal-header in your modal.

`.modal-header`
`.modal-body`
`.modal-footer` 
<div class="modal">
  <div class="modal-header">
    …
  </div>
  <div class="modal-body">
    …
  </div>
  <div class="modal-footer">
    …
  </div>
</div>

Modal Sizes

Two additional modal sizes are provided by CNVS using the class modifiers .modal-small and .modal-large. The class modifiers only impact the width of the modal and, if defined in CNVS, the inner padding of the header, body, and footer.

Small Modal

Use the class modifier .modal-small to reduce the width of your modal.

Modal Header Title

Maecenas faucibus mollis interdum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor.

Close Submit 
<div class="modal modal-small modal-inline">
  …
</div>

Large Modal

Use the class modifier .modal-large to increase the width of your modal.

Modal Header Title

Maecenas faucibus mollis interdum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Close Submit 
<div class="modal modal-large modal-inline">
  …
</div>