Improve this doc View source

pfModalOverlay
directive in module patternfly.modals

Description

The Modal Overlay pattern provides a way to quickly load and display important information to the user without navigating away from the current page. It utilizes the Angular UI modal and Patternfly styling. Use cases for Modal Overlays can vary a great deal, but some examples include the following:

  • To remind or prompt users
  • To load dialogs that require user input before advancing
  • To load tasks which require a user’s full attention, such as stepping through a wizard flow
  • To present important information or warnings

Usage

as element:
<pf-modal-overlay
       show-modal="{boolean}"
       on-close="{function}"
       modal-id="{string}"
       modal-title="{string}"
       modal-body-template="{string}"
       action-buttons="{array}"
       [title-id="{string}"]
       [hide-close-icon="{boolean}"]
       [background-close="{boolean}"]
       [on-background-click="{function}"]
       [is-form="{boolean}"]
       [modal-body-scope="{object}"]>
</pf-modal-overlay>

Parameters

ParamTypeDetails
showModalboolean

Flag for setting modal to hide/show by default

onClosefunction

Function to call when the modal is closed
Note: the parameter passed to the on-close function must be named 'dismissCause'

modalIdstring

Id of the modal

modalTitlestring

The title of the modal displayed in the header

modalBodyTemplatestring

Path to html template for modal body

actionButtonsarray

array of button objects. Each button can have the following properties:

  • .label - the text to display on the button
  • .class - (optional) classes to add to the button
  • .actionFn - (optional) user defined function to call when the button is clicked. May optionally return false to prevent closing the modal. For example to perfrom asynchronous validations.
  • .isDisabled - (optional) boolean true if the button should be disabled by default
  • .isCancel - (optional) boolean true if the button should cancel and dismiss the modal
titleId
(optional)
string

Id of the title. "modalTitle" by default

hideCloseIcon
(optional)
boolean

Flag indicating that the modal should hide the 'x' close icon.

backgroundClose
(optional)
boolean

Flag indicating that the modal should close if user clicks background. False by default

onBackgroundClick
(optional)
function

Function to call when the user clicks the background. Return true if clicking background should close the modal, false otherwise.
Note: backgroundClose needs to be set to true in order for the onBackgroundClick event to fire.

isForm
(optional)
boolean

Flag indicating that the modal body will contain a form which should be valid before an action button is enabled

modalBodyScope
(optional)
object

Object containing the scope for the modalBodyTemplate

Example

Source


































Demo