Documentation

Class

AashModalDialog

AashModalDialog~AashModalDialog(props)

Generates a modal dialog.

Example:

<div id="sampleDialog" class="aash-modal-dialog dialog__backdrop"
    showcancel="true">
  <div role="dialog"
      aria-labelledby="sampleDialog-label" aria-modal="true">
    <header id="sampleDialog-label">
      <p>Sample Dialog</p>
      <button type="button" class="fa fa-times"></button>
    </header>
    <section class="">
      <i>Sample dialog content</i>
    </section>
    <footer>
      <button type="button">Okay</button>
    </footer>
  </div>
</div>

Once created, the component provides the externally invocable methods defined by module:AashModalDialog.Api through an object in a property of the mounted element (which also has the provided id).

By default, the button is generated with type button. If your dialog contains a form and you want to make use of the browser's support for autocompletion, the button must have type submit (although submitting will be prevented). You can force this by setting submitForm to the id of the form in the dialog content.

The dialog is generated with an apply button and an okay (confirm) button. The latter closes the form when pushed. The buttons are generate when the respective labels aren't empty. If both labels are empty, there will be no footer. This can be used for a purely informative dialog that has only a "cancel" (close) element.

Constructor

# new AashModalDialog(props)

Parameters:
Name Type Description
props Object

the properties
id string

the dialog's id
title string

the dialog's title
showCancel boolean

whether to show a cancel button
content string

the dialog's content
contentClasses Array.string

classes to apply to the content
applyLabel string

the label for the apply button; defaults to empty
okayLabel string

the label for the okay (confirm) button; defaults to "OK"
onAction function

the function to invoke on action
submitForm string

the id of a form

View Source components/modal-dialog/AashModalDialog.ts, line 9