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

yarn add @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
    header={
      <h2>Modal header</h2>
    }
    footer={
      <p>Modal footer</p>
    }
  >
    <p>Modal body goes here</p>
  </ModalDialog>
, container);

ModalDialog

Kind: global class

• Properties

  • modalDialog.width : string
  • modalDialog.onClose : 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.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.onClose : 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