Modal

Component Dependency

Dashing uses the dash-modal.js component to deliver modals. To utilize these styles, you must install this component into your project.

Default Modal

<div class="modal-header">
  <h3>Modal Header</h3>
</div>

<div class="modal-content">
  <div class="row">
    <div class="column column--full">
      <p>Modal content</p>
    </div>
  </div>
</div>

<div class="modal-footer align-left">
  Modal footer
</div>

Small Modal

<div class="modal-header">
  <h3>Modal Header</h3>
</div>

<div class="modal-content">
  <div class="row">
    <div class="column column--full">
      <p>Modal content</p>
    </div>
  </div>
</div>

<div class="modal-footer align-left">
  Modal footer
</div>

Large Modal

<div class="modal-header">
  <h3>Modal Header</h3>
</div>

<div class="modal-content">
  <div class="row">
    <div class="column column--full">
      <p>Modal content</p>
    </div>
  </div>
</div>

<div class="modal-footer align-left">
  Modal footer
</div>

Data Modal Example

This is an example of a modal used to display and edit data.

<div class="modal-header">
  <h3>Edit Member</h3>
</div>

<div class="modal-content">
  <fieldset class="row row--nested">
    <div class="column column--half column--nested">
      <label for="firstName">First Name</label>
      <input type="text" name="firstName" value="Ryan">
    </div>
    <div class="column column--half column--nested">
      <label for="lastName">Last Name</label>
      <input type="text" name="lastName" value="Fitz">
    </div>
  </fieldset>
  <fieldset class="row row--nested">
    <div class="column column--half column--nested">
      <label for="dateOfBirth">Date of Birth</label>
      <input type="date" name="dateOfBirth" value="1986-01-18">
    </div>
    <div class="column column--half column--nested select--has-icon">
      <label for="gender">Gender</label>
      <select class="" name="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
    </div>
  </fieldset>
</div>

<div class="modal-footer">
  <button data-action="update-need-types" class="button button--smooth button--primary">Save</button>
  <button data-id="close" class="button button--transparent button--grey">Cancel</button>
</div>

Video Modal Example

Use the modal size modal-large to display videos within a modal.

<div class="modal-header">
  <h3>Modal Header</h3>
</div>

<div class="modal-content has-video">
  <iframe src="https://player.vimeo.com/video/232680932?title=0&badge=0&portrait=0&byline=0&color=754d85&autoplay=true" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

<div class="modal-footer align-center">
  <button data-id="close" class="button button--smooth button--blue">Finish watching video</button>
</div>

Info Dialog Example

Use dialogs to display quick, informative content to your user.

<div class="modal-header">
  <h3>Default Modal</h3>
</div>

<div class="modal-content">
  <div class="row">
    <div class="column column--full">
      <h3>What should I put inside a modal?</h3>
      <p>All modal content should be contained within a <code class="example-text">modal-content</code> element.</p>
      <p>If your modal is strictly informational and no action is required from your user, you do not need to include a <code class="example-text">modal-footer</code> element. The user can dismiss the modal by clicking the <code class="example-text">×</code>, hitting their <code class="example-text">esc</code> key or clicking ouside of the modal on the overlay.</p>
    </div>
  </div>
</div>