Modal

import { Modal } from '@concur/nui-widgets';

Modals act as dialog boxes overlaid on top of the page. This allows the user to focus on specific content before returning to the underlying application page.

Modals consist of a header component (with or without a close box), a title component, a body component, and a footer component (plus an optional subheading component below the title).

Examples

Sizes

There are three supported modal sizes: 'lg' (default), 'md', and 'sm'. Use the size property to set the size.

class HIGModalEx01 extends React.Component {
    constructor(props) {
        super(props);
        this._show = this._show.bind(this);
        this._hide = this._hide.bind(this);
    }

    _show(prop) {
        this.setState({[prop]: true});
    }

    _hide(prop) {
        this.setState({[prop]: false});
    }

    render() {
        return (
            <div>
                <ButtonToolbar muted>
                    <Button onClick={() => this._show('modalLarge')}>Large Modal</Button>
                    <Button onClick={() => this._show('modalMedium')}>Medium Modal</Button>
                    <Button onClick={() => this._show('modalSmall')}>Small Modal</Button>
                </ButtonToolbar>

                <Modal
                    onHide={() => this._hide('modalLarge')}
                    show={this.state && this.state.modalLarge}>
                        <Modal.Header closeButton>
                            <Modal.Title>Sample Title</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            Sample modal content.
                        </Modal.Body>
                        <Modal.Footer>
                            <Button onClick={() => this._hide('modalLarge')}>Close</Button>
                        </Modal.Footer>
                </Modal>

                <Modal
                    onHide={() => this._hide('modalMedium')}
                    show={this.state && this.state.modalMedium}
                    size='md'>
                        <Modal.Header closeButton>
                            <Modal.Title>Sample Title</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            Sample modal content.
                        </Modal.Body>
                        <Modal.Footer>
                            <Button onClick={() => this._hide('modalMedium')}>Close</Button>
                        </Modal.Footer>
                </Modal>

                <Modal
                    onHide={() => this._hide('modalSmall')}
                    show={this.state && this.state.modalSmall}
                    size='sm'>
                        <Modal.Header closeButton>
                            <Modal.Title>Sample Title</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            Sample modal content.
                        </Modal.Body>
                        <Modal.Footer>
                            <Button onClick={() => this._hide('modalSmall')}>Close</Button>
                        </Modal.Footer>
                </Modal>
            </div>
        );
    }
}

With Subhead

The Modal.Subhead component provides a way to add additional details to the modal header.

class HIGModalEx02 extends React.Component {
    constructor(props) {
        super(props);
        this._show = this._show.bind(this);
        this._hide = this._hide.bind(this);
    }

    _show(prop) {
        this.setState({[prop]: true});
    }

    _hide(prop) {
        this.setState({[prop]: false});
    }

    render() {
        return (
            <div>
                <ButtonToolbar muted>
                    <Button onClick={() => this._show('modal')}>Show Modal w/ Subhead</Button>
                </ButtonToolbar>

                <Modal
                    onHide={() => this._hide('modal')}
                    show={this.state && this.state.modal}>
                        <Modal.Header closeButton>
                            <Modal.Title>Sample Title with Subhead</Modal.Title>
                            <Modal.Subhead>
                                <ul className='list-inline cnqr-separated'>
                                    <li>Some information</li>
                                    <li>More information</li>
                                </ul>
                            </Modal.Subhead>
                        </Modal.Header>
                        <Modal.Body>
                            Sample modal content.
                        </Modal.Body>
                        <Modal.Footer>
                            <Button onClick={() => this._hide('modal')}>Close</Button>
                        </Modal.Footer>
                </Modal>
            </div>
        );
    }
}

Full-Screen Modals

Full-screen modals will size themselves to the dimensions of the browser window, obscuring all underlying content.

class HIGModalEx03 extends React.Component {
    constructor(props) {
        super(props);
        this._show = this._show.bind(this);
        this._hide = this._hide.bind(this);
    }

    _show(prop) {
        this.setState({[prop]: true});
    }

    _hide(prop) {
        this.setState({[prop]: false});
    }

    render() {
        return (
            <div>
                <ButtonToolbar muted>
                    <Button onClick={() => this._show('modal')}>Show Fullscreen Modal</Button>
                </ButtonToolbar>

                <Modal
                    fullscreen
                    onHide={() => this._hide('modal')}
                    show={this.state && this.state.modal}>
                        <Modal.Header closeButton>
                            <Modal.Title>Sample Title</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            Sample modal content.
                        </Modal.Body>
                        <Modal.Footer>
                            <Button onClick={() => this._hide('modal')}>Close</Button>
                        </Modal.Footer>
                </Modal>
            </div>
        );
    }
}

Usage

Properties

Property Type Default Description
bsModal Object   An object to set a reference to.
className String   Custom classes to add to the modal’s outermost <div> tag.
fullscreen Boolean false When true, the modal will take up the entire browser window, obscuring all underlying content.
size String 'lg' Size of the modal. Options are 'lg', 'md', 'sm'.

Modal.Header

Properties

Property Type Default Description
aria-label String 'Close' Provides an accessible label for the close button.
bsClass String 'modal-header' Base CSS class and prefix for the component. One should not generally change bsClass except to add new, non-Bootstrap CSS styles to a component.
closeButton Boolean false If true, the modal will display a close button.

Callbacks

Property Parameters Description
onHide   Fired when the close button is clicked. If used directly inside a Modal component, onHide events will propagate to the parent Modal’s onHide() function.

Modal.Title

Properties

Property Type Default Description
bsClass String 'modal-title' Base CSS class and prefix for the component. One should not generally change bsClass except to add new, non-Bootstrap CSS styles to a component.
componentClass Element Type 'h4' Custom element types can be used for this component.

Modal.Subhead

Properties

Property Type Default Description
className String   Custom classes to add to the sub heading <div> tag.

Modal.Body

Properties

Property Type Default Description
bsClass String 'modal-body' Base CSS class and prefix for the component. One should not generally change bsClass except to add new, non-Bootstrap CSS styles to a component.
componentClass Element Type 'div' Custom element types can be used for this component.

Modal.Footer

Properties

Property Type Default Description
bsClass String 'modal-footer' Base CSS class and prefix for the component. One should not generally change bsClass except to add new, non-Bootstrap CSS styles to a component.
componentClass Element Type 'div' Custom element types can be used for this component.