Composites

Modals

Modals are the primary mechanism to present the user input forms. They can be triggered multiple different ways and appear in a lightbox over the application's UI.

Quick look

A few things to keep in mind when using modals:

  1. They are always fixed to the same spot over the scrim and can respond appropriately to screen size.
  2. If a secondary terminal action is needed, it should go between the primary button and cancel button, styled as a secondary button.
  3. Modals with just text should be used sparingly for things like read-only forms.
  4. More examples of forms will be added over time, so check back here periodically.

Try it out

The most important thing to note when looking over these modal examples is their construction. Note the button placement, naming conventions, spacing, etc... Nearly all of these should be taken care of inherently when you adopt our markup but it's important to still check and make sure everything looks as it should.

Code samples

<button class="dqpl-button-secondary" type="button" data-dialog-id="demo-1">Modal with just text</button>
<button class="dqpl-button-secondary" type="button" data-dialog-id="demo-2">Modal with form</button>
<div class="dqpl-modal" role="dialog" id="demo-1" aria-labelledby="text-modal-heading">
  <div class="dqpl-dialog-inner">
    <div class="dqpl-modal-header">
      <h2 id="text-modal-heading">Text modal</h2>
      <button class="dqpl-close dqpl-icon" type="button">
        <div class="fa fa-close" aria-hidden="true"></div>
        <div class="dqpl-offscreen">Close</div>
      </button>
    </div>
    <div class="dqpl-content">
      <p>This is a modal with just text in it and stuff.</p>
    </div>
    <div class="dqpl-modal-footer">
      <button class="dqpl-button-secondary dqpl-cancel" type="button">OK</button>
    </div>
  </div>
</div>
<div class="dqpl-modal" role="dialog" id="demo-2" aria-labelledby="form-modal-heading">
  <div class="dqpl-dialog-inner">
    <div class="dqpl-modal-header">
      <h2 id="form-modal-heading">Modal with form</h2>
      <button class="dqpl-close" type="button">
        <div class="fa fa-close" aria-hidden="true"></div>
        <div class="dqpl-offscreen">Close</div>
      </button>
    </div>
    <div class="dqpl-content">
      <div class="field-section" role="group" aria-labelledby="personal-info">
        <h3 id="personal-info">Personal information</h3>
        <div class="dqpl-field-wrap">
          <label class="dqpl-label dqpl-required" for="first-name">First name</label>
          <input class="dqpl-text-input" type="text" id="first-name" aria-required="true"/>
          <div class="dqpl-error-wrap"></div>
        </div>
        <div class="dqpl-field-wrap">
          <label class="dqpl-label dqpl-required" for="last-name">Last name</label>
          <input class="dqpl-text-input" type="text" id="last-name" aria-required="true"/>
          <div class="dqpl-error-wrap"></div>
        </div>
      </div>
      <div class="field-section" role="group" aria-labelledby="contact-info">
        <h3 id="contact-info">Contact information</h3>
        <div class="dqpl-field-wrap">
          <label class="dqpl-label dqpl-required" for="email">Email</label>
          <input class="dqpl-text-input" type="text" id="email" aria-required="true"/>
          <div class="dqpl-error-wrap"></div>
        </div>
        <div class="dqpl-field-wrap">
          <label class="dqpl-label dqpl-required" for="phone">Phone number</label>
          <input class="dqpl-text-input" type="text" id="phone" aria-required="true"/>
          <div class="dqpl-error-wrap"></div>
        </div>
      </div>
    </div>
    <div class="dqpl-modal-footer">
      <button class="dqpl-button-primary" type="button">Save</button>
      <button class="dqpl-button-secondary dqpl-cancel" type="button">Cancel</button>
    </div>
  </div>
</div>

For more information on implementation read thewiki.