alert

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>