@atlaskit/modal-dialog

ModalDialog

This component displays content in a layer that sits above the rest of the page content. Users won't be able to interact with the page until the dialog is closed.

##Try it out

Interact with a live demo of the @atlaskit/modal-dialog component.

Installation

npm install @atlaskit/modal-dialog

Using the component

This package exports a React component.

Import the component in your React app as follows:

import ModalDialog from '@atlaskit/modal-dialog';
ReactDOM.render(
  <ModalDialog
    isOpen
    header={
      <h2>Modal header</h2>
    }
    footer={
      <p>Modal footer</p>
    }
  >
    <p>Modal body goes here</p>
  </ModalDialog>
, container);

ModalDialog

Kind: global class

• Properties

  • modalDialog.isOpen : Boolean
  • modalDialog.width : string
  • modalDialog.onDialogDismissed : function
  • ModalDialog.header : element
  • ModalDialog.children : element
  • ModalDialog.footer : element

new ModalDialog()

A modal dialog which blankets the page

JS Example

import ModalDialog from 'ak-modal-dialog';
ReactDOM.render(<ModalDialog />, container);

modalDialog.isOpen : Boolean

Whether the modal dialog is open/visible

Kind: instance property of ModalDialog Default: false

modalDialog.width : string

The maximum width tier of the dialog Allowed values are: 'small' (400px), 'medium' (600px), 'large' (800px), 'x-large' (968px), or any integer value defining the pixel width (e.g. 300), or any string value defining the pixel or percentage width including unit (e.g. 300px, 75%).

Kind: instance property of ModalDialog Default: "default"

modalDialog.onDialogDismissed : function

Handler function to be called when the blanket is clicked

Kind: instance property of ModalDialog

ModalDialog.header : element

Elements to be placed at top of modal dialog

Kind: static property of ModalDialog

ModalDialog.children : element

Content to be placed in the middle of the modal dialog

Kind: static property of ModalDialog

ModalDialog.footer : element

Elements to be placed at bottom of modal dialog

Kind: static property of ModalDialog

* Please note that this module could have dependencies that are governed by the Atlassian Design Guidelines license which will be automatically included on install. Each dependency has a license file that indicates whether the Atlassian Design Guidelines license applies.

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Are you in trouble? Read through our contribution guidelines and raise an issue to us.