# Modals Modal

# Static Markup

A modal dialog component


            const modalInstance = (
              <Modal.Dialog>
                <Modal.Header>
                  <Modal.Title>Modal title</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                  One fine body...
                </Modal.Body>

                <Modal.Footer>
                  <Button>Close</Button>
                  <Button bsStyle='primary'>Save changes</Button>
                </Modal.Footer>

              </Modal.Dialog>
            );

            
          

# Basic example

A modal with header, body, and set of actions in the footer. Use <Modal/> in combination with other components to show or hide your Modal. The <Modal/> Component comes with a few convenient 'sub components': <Modal.Header/>, <Modal.Title/>, <Modal.Body/>, and <Modal.Footer/>, which you can use to build the Modal content.


          class BasicExample extends React.Component {
            constructor(props) {
              super(props);

              this.state = { showModal: false };
            }

            close() {
              this.setState({ showModal: false });
            }

            open() {
              this.setState({ showModal: true });
            }

            render() {
              let popover = <Popover title='popover' id='popover'>very popover. such engagement</Popover>;
              let tooltip = <Tooltip id='tooltip'>wow.</Tooltip>;

              return (
                <div>
                  <p>Click to get the full Modal experience!</p>

                  <Button
                    bsStyle='primary'
                    bsSize='large'
                    onClick={::this.open}
                  >
                    Launch demo modal
                  </Button>

                  <Modal show={this.state.showModal} onHide={::this.close}>
                    <Modal.Header closeButton>
                      <Modal.Title>Modal heading</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                      <h4>Text in a modal</h4>
                      <p><LoremIpsum query='1s' /></p>

                      <h4>Popover in a modal</h4>
                      <p>there is a <OverlayTrigger overlay={popover}><a href='#'>popover</a></OverlayTrigger> here</p>

                      <h4>Tooltips in a modal</h4>
                      <p>there is a <OverlayTrigger overlay={tooltip}><a href='#'>tooltip</a></OverlayTrigger> here</p>

                      <hr />

                      <h4>Overflowing text to show scroll behavior</h4>
                      <p><LoremIpsum query='3s' /></p>
                      <p><LoremIpsum query='3s' /></p>
                      <p><LoremIpsum query='3s' /></p>
                      <p><LoremIpsum query='3s' /></p>
                      <p><LoremIpsum query='3s' /></p>
                      <p><LoremIpsum query='3s' /></p>
                      <p><LoremIpsum query='3s' /></p>
                      <p><LoremIpsum query='3s' /></p>
                    </Modal.Body>
                    <Modal.Footer>
                      <Button onClick={::this.close}>Close</Button>
                    </Modal.Footer>
                  </Modal>
                </div>
              );
            }
          }

          const modalInstance = (
            <BasicExample />
          );

          
        

# Contained Modal


          class Trigger extends React.Component {
            constructor(props) {
              super(props);

              this.state = { show: false };
            }

            render() {
              let close = () => this.setState({ show: false});

              return (
                <div className="modal-container" style={{height: 200}}>
                  <Button
                    bsStyle="primary"
                    bsSize="large"
                    onClick={() => this.setState({ show: true})}
                  >
                    Launch contained modal
                  </Button>

                  <Modal
                    show={this.state.show}
                    onHide={close}
                    container={this}
                    aria-labelledby="contained-modal-title"
                  >
                    <Modal.Header closeButton>
                      <Modal.Title id="contained-modal-title">Contained Modal</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                      Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
                    </Modal.Body>
                    <Modal.Footer>
                      <Button onClick={close}>Close</Button>
                    </Modal.Footer>
                  </Modal>
                </div>
              );
            }
          }

          
        

# Sizing modals using standard Bootstrap props

You can specify a bootstrap large or small modal by using the bsSize prop.


          class MySmallModal extends React.Component {
            render() {
              return (
                <Modal {...this.props} bsSize="small" aria-labelledby="contained-modal-title-sm">
                  <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-sm">Modal heading</Modal.Title>
                  </Modal.Header>
                  <Modal.Body>
                    <h4>Wrapped Text</h4>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                  </Modal.Body>
                  <Modal.Footer>
                    <Button onClick={this.props.onHide}>Close</Button>
                  </Modal.Footer>
                </Modal>
              );
            }
          }

          class MyLargeModal extends React.Component {
            render() {
              return (
                <Modal {...this.props} lg aria-labelledby="contained-modal-title-lg">
                  <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-lg">Modal heading</Modal.Title>
                  </Modal.Header>
                  <Modal.Body>
                    <h4>Wrapped Text</h4>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                  </Modal.Body>
                  <Modal.Footer>
                    <Button onClick={this.props.onHide}>Close</Button>
                  </Modal.Footer>
                </Modal>
              );
            }
          }

          class App extends React.Component {
            constructor(props) {
              super(props);

              this.state = { smShow: false, lgShow: false };
            }

            render() {
              let smClose = () => this.setState({ smShow: false });
              let lgClose = () => this.setState({ lgShow: false });

              return (
                <ButtonToolbar>
                  <Button bsStyle="primary" onClick={()=>this.setState({ smShow: true })}>
                    Launch small demo modal
                  </Button>
                  <Button bsStyle="primary" onClick={()=>this.setState({ lgShow: true })}>
                    Launch large demo modal
                  </Button>

                  <MySmallModal show={this.state.smShow} onHide={smClose} />
                  <MyLargeModal show={this.state.lgShow} onHide={lgClose} />
                </ButtonToolbar>
              );
            }
          }

          
        

# Props

Modal

NameTypeDefaultDescription
animationbooleanfalseOpen and close the Modal with a slide and fade animation.
autoFocusbooleanWhen true The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. Generally this should never be set to false as it makes the Modal less accessible to assistive technologies, like screen-readers.
backdropone of: 'static', true, falseInclude a backdrop component. Specify 'static' for a backdrop that doesn't trigger an 'onHide' when clicked.
bsClassstring'modal'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
bsSizeone of: "lg", "large", "sm", "small"Component size variations.
smbooleanfalseSmall size variation shortcut
lgbooleanfalseLarge size variation shortcut
dialogClassNamestringA css class to apply to the Modal dialog DOM node.
dialogComponentClasselementTypeModalDialogA Component type that provides the modal content Markup. This is a useful prop when you want to use your own styles and markup to create a custom modal component.
enforceFocusbooleanWhen true The modal will prevent focus from leaving the Modal while open. Consider leaving the default value here, as it is necessary to make the Modal work well with assistive technologies, such as screen readers.
keyboardbooleanClose the modal when escape key is pressed
onEnterfunctionCallback fired before the Modal transitions in
onEnteredfunctionCallback fired after the Modal finishes transitioning in
onEnteringfunctionCallback fired as the Modal begins to transition in
onExitfunctionCallback fired right before the Modal transitions out
onExitedfunctionCallback fired after the Modal finishes transitioning out
onExitingfunctionCallback fired as the Modal begins to transition out
onHidefunctionA callback fired when the header closeButton or non-static backdrop is clicked. Required if either are specified.
showbooleanWhen true The modal will show itself.

Modal.Dialog / ModalDialog

NameTypeDefaultDescription
smbooleanfalseSmall size variation shortcut
lgbooleanfalseLarge size variation shortcut

Modal.Header / ModalHeader

NameTypeDefaultDescription
aria-labelstring'Close'The 'aria-label' attribute provides an accessible label for the close button. It is used for Assistive Technology when the label text is not readable.
bsClassstring'modal'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
closeButtonbooleanfalseSpecify whether the Component should contain a close button
onHidefunctionA Callback fired when the close button is clicked. If used directly inside a Modal component, the onHide will automatically be propagated up to the parent Modal onHide.

Modal.Title / ModalTitle

NameTypeDefaultDescription
bsClassstring'modal'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.

Modal.Body / ModalBody

NameTypeDefaultDescription
bsClassstring'modal'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.

Modal.Footer / ModalFooter

NameTypeDefaultDescription
bsClassstring'modal'Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.