An accessible dialog overlay that's rendered to the `target` DOM element through a [portal](https://reactjs.org/docs/portals.html).

ModalHeader, ModalBody, and ModalFooter are all optional:
* **ModalHeader**: You can provide a way to dismiss modals via `toggleClose` or through an explicit dismiss action.
* **ModalBody**: Use `scrollable` on Modal to specify whether overflow should apply to ModalBody or the viewport.
* **ModalFooter**: Uses the [Flex component](/#/UI%20Library/Components?id=flex).

#### Modal

```jsx
import Button from '@ui/components/Button';
import Flex from '@ui/components/Flex';
import Title from '@ui/components/Title';

import ModalHeader from '@ui/components/Modal/Header';
import ModalBody from '@ui/components/Modal/Body';
import ModalFooter from '@ui/components/Modal/Footer';

import Owlbert from './owlbert-celebrate.png';

const modal = React.createRef();
const toggle = () => modal.current.toggle();

<Flex justify="center">
  <Button onClick={toggle}>
    Open
  </Button>
  <Modal ref={modal} target="#modal-target" onClose={e => console.log('closed')} scrollable size="md" style={{position: 'relative' }} verticalCenter>
    <ModalHeader toggleClose={toggle}>
      <Title level={4}>
        <i className="fa fa-check-circle" style={{ color: '#12ca93', marginRight: 10 }} />
        Hoot Hoot Hooray
      </Title>
    </ModalHeader>
    <ModalBody>
      <p style={{ color: '#4f5a66', fontSize: 18, lineHeight: 1.6, margin: '0 0 50px' }}>Your staged changes are now live and viewable by your developer community.</p>
      <img src={Owlbert} style={{ bottom: 20, position: 'absolute' }} />
    </ModalBody>
    <ModalFooter>
      <Button bem={{ ['shale_text']: true }} onClick={toggle}>Close</Button>
      <Button onClick={toggle}>Thanks!</Button>
    </ModalFooter>
  </Modal>
</Flex>;
```

#### Modal Sizes
Use `sm` for confirmations when something can’t easily be undone—simply don’t set a size if you want to use a fluid width. Apply `noDismiss` to prevent users from dismissing a modal with the <kbd>ESC</kbd> key or clicking outside the modal.

```jsx
import Button from '@ui/components/Button';
import Flex from '@ui/components/Flex';
import Title from '@ui/components/Title';

import ModalBody from '@ui/components/Modal/Body';
import ModalFooter from '@ui/components/Modal/Footer';

const modal = React.createRef();
const toggle = () => modal.current.toggle();

<Flex justify="center">
  <Button onClick={toggle}>
    Confirmation
  </Button>
  <Modal ref={modal} target="#modal-target-xs" noDismiss onClose={e => console.log('closed')} size="sm" style={{ 'line-height': '1.6', 'text-align': 'center' }} verticalCenter>
    <ModalBody>
      <Title level={4} style={{ margin: '10px 0 10px' }}>Terms and Conditions</Title>
      <p style={{ margin: 0, lineHeight: 1.6 }}>I agree to the ReadMe Terms and Conditions.</p>
    </ModalBody>
    <ModalFooter justify="center">
      <Button bem={{ ['shale_text']: true }} onClick={toggle}>Disagree</Button>
      <Button bem={{ 'blue': true }} onClick={toggle}>Agree</Button>
    </ModalFooter>
  </Modal>
</Flex>;
```

<div id="modal-target" className="ModalWrapper"></div>
<div id="modal-target-xs" className="ModalWrapper"></div>