Harris Schneiderman edited this page Sep 7, 2017 · 2 revisions

Alert

What is needed?

Alerts consist of just the alert dialog.

The Alert Dialog

The alert dialog should consist of the following:

  • the "dqpl-alert" class
  • role="alertdialog"
  • and id for the trigger to point at in it's data-dialog-modal attribute
  • Within the <div class="dqpl-alert" role="alertdialog"></div> element:
    • An element with the "dqpl-dialog-inner" class
    • Within "dqpl-dialog-inner" :
      • An element with the "dqpl-content" class and "info" id
    • A sibling of "dqpl-dialog-inner" should be an element with the "dqpl-buttons" class. This is where the main content of the alert will live.
      • Within the "dqpl-buttons" you should at least have one <button class="dqpl-button-primary set" aria-describedby="info">Set</button>

API

In addition, adding the "data-force-action="true" attribute will prevent the dqpl javascript from allowing the alert to be closed via escape keydown.

Also, adding the "data-no-resize="true" attribute will prevent the dqpl javascript from responsively resizing the alert content's height.

Example HTML

<button class="dqpl-button-secondary" type="button" data-alert-id="demo-1">Delete</button>

<div class="dqpl-alert" id="demo-1" role="alertdialog">
  <div class="dqpl-inner">
    <div class="dqpl-content" id="info">
      <div class="dqpl-text">Are you sure you want to delete that?</div>
    </div>
    <div class="dqpl-buttons">
      <button class="dqpl-button-primary set" aria-describedby="info">Delete</button>
      <button class="dqpl-button-secondary cancel">Cancel</button>
    </div>
  </div>
</div>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.