Modal

React Bootstrap modal is lightweight, but powerful & multipurpose popup. Learn how to manipulate size, styles & position. Multiple examples and detailed tutorial.

The Modal is a dialog box/popup window which can be used for light boxes, user notifications, UI enhancements, e-commerce components and many other cases.

It's easily customized. You can manipulate size, position, and content.

Custom Modal

import React from "react";
import { CDBModal, CDBCardImage, CDBCardBody, CDBCardTitle, CDBCardText, CDBCard, CDBBtn, CDBContainer } from "cdbreact";
const Modal = () => {
  const [state, setState] = useState({
    modal1: false,
    modal2: false,
    modal3: false,
    modal4: false,
    modal5: false,
    modal6: false,
    modal7: false,
    modal8: false,
    modal9: false,
  });
  const toggle = (nr) => () => {
    let modalNumber = "modal" + nr;
    setState({
      ...state,
      [modalNumber]: !state[modalNumber],
    });
  };
  return (
    <CDBContainer>
          <CDBBtn onClick={toggle(1)} color="dark">
            Modal
          </CDBBtn>
          <CDBModal isOpen={state.modal1} toggle={toggle(1)} centered fade>
            <CDBCard>
              <CDBCardImage className="img-fluid" src="img/modal.jpg" />
              <CDBCardBody>
                <CDBCardTitle>Title</CDBCardTitle>
                <CDBCardText>
                  Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                  orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                  mauris ut tempus.
                </CDBCardText>
                <div className="d-flex">
                  <div
                    className="d-flex justify-content-start"
                    style={{ flex: " 50%" }}
                  >
                    <CDBBtn color="light" flat>
                      Label
                    </CDBBtn>
                  </div>
                  <div
                    className="d-flex justify-content-end"
                    style={{ flex: " 50%" }}
                  >
                    <CDBBtn color="white" flat onClick={toggle(1)}>
                      Cancel
                    </CDBBtn>
                    <CDBBtn color="dark" flat>
                      Done
                    </CDBBtn>
                  </div>
                </div>
              </CDBCardBody>
            </CDBCard>
          </CDBModal>
    </CDBContainer>
  );
};
export default  Modal;

Modal Sizes

import React from "react";
import { CDBModal, CDBCardImage, CDBCardBody, CDBCardTitle, CDBCardText, CDBCard, CDBBtn, CDBContainer } from "cdbreact";
const Modal = () => {
  const [state, setState] = useState({
    modal1: false,
    modal2: false,
    modal3: false,
    modal4: false,
    modal5: false,
    modal6: false,
    modal7: false,
    modal8: false,
    modal9: false,
  });
  const toggle = (nr) => () => {
    let modalNumber = "modal" + nr;
    setState({
      ...state,
      [modalNumber]: !state[modalNumber],
    });
  };
  return (
    <CDBContainer>
            <CDBBtn color="light" flat onClick={toggle(2)}>
              Medium modal
            </CDBBtn>
            <CDBModal isOpen={state.modal2} toggle={toggle(2)}>
              <CDBCard border>
                <CDBCardImage className="img-fluid" src="img/modal.jpg" />
                <CDBCardBody>
                  <CDBCardTitle>Title</CDBCardTitle>
                  <CDBCardText>
                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                    mauris ut tempus.
                  </CDBCardText>
                  <div className="d-flex">
                    <div
                      className="d-flex justify-content-start"
                      style={{ flex: " 50%" }}
                    >
                      <CDBBtn color="light" flat>
                        Label
                      </CDBBtn>
                    </div>
                    <div
                      className="d-flex justify-content-end"
                      style={{ flex: " 50%" }}
                    >
                      <CDBBtn color="white" flat onClick={toggle(2)}>
                        Cancel
                      </CDBBtn>
                      <CDBBtn color="dark" flat>
                        Done
                      </CDBBtn>
                    </div>
                  </div>
                </CDBCardBody>
              </CDBCard>
            </CDBModal>
            <CDBBtn color="light" flat onClick={toggle(3)}>
              Small modal
            </CDBBtn>
            <CDBModal isOpen={state.modal3} toggle={toggle(3)} size="sm">
              <CDBCard>
                <CDBCardImage className="img-fluid" src="img/modal.jpg" />
                <CDBCardBody>
                  <CDBCardTitle>Title</CDBCardTitle>
                  <CDBCardText>
                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                    mauris ut tempus.
                  </CDBCardText>
                  <div className="d-flex">
                    <div
                      className="d-flex justify-content-start"
                      style={{ flex: " 50%" }}
                    >
                      <CDBBtn color="light" flat>
                        Label
                      </CDBBtn>
                    </div>
                    <div
                      className="d-flex justify-content-end"
                      style={{ flex: " 50%" }}
                    >
                      <CDBBtn color="white" flat onClick={toggle(3)}>
                        Cancel
                      </CDBBtn>
                      <CDBBtn color="dark" flat>
                        Done
                      </CDBBtn>
                    </div>
                  </div>
                </CDBCardBody>
              </CDBCard>
            </CDBModal>
            <CDBBtn color="light" flat onClick={toggle(4)}>
              Large modal
            </CDBBtn>
            <CDBModal isOpen={state.modal4} toggle={toggle(4)} size="lg">
              <CDBCard border>
                <CDBCardBody>
                  <CDBCardTitle>Title</CDBCardTitle>
                  <CDBCardText>
                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                    mauris ut tempus.
                  </CDBCardText>
                  <div className="d-flex">
                    <div
                      className="d-flex justify-content-start"
                      style={{ flex: " 50%" }}
                    >
                      <CDBBtn color="light" flat>
                        Label
                      </CDBBtn>
                    </div>
                    <div
                      className="d-flex justify-content-end"
                      style={{ flex: " 50%" }}
                    >
                      <CDBBtn color="white" flat onClick={toggle(4)}>
                        Cancel
                      </CDBBtn>
                      <CDBBtn color="dark" flat>
                        Done
                      </CDBBtn>
                    </div>
                  </div>
                </CDBCardBody>
              </CDBCard>
            </CDBModal>
            <CDBBtn color="light" flat onClick={toggle(5)}>
              Fluid modal
            </CDBBtn>
            <CDBModal isOpen={state.modal5} toggle={toggle(5)} size="fluid">
              <CDBCard border>
                <CDBCardBody>
                  <CDBCardTitle>Title</CDBCardTitle>
                  <CDBCardText>
                    Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
                    orcane faucibus ex, non facilisis nisl. Maexenas aliquet
                    mauris ut tempus.
                  </CDBCardText>
                  <div className="d-flex">
                    <div
                      className="d-flex justify-content-start"
                      style={{ flex: " 50%" }}
                    >
                      <CDBBtn color="light" flat>
                        Label
                      </CDBBtn>
                    </div>
                    <div
                      className="d-flex justify-content-end"
                      style={{ flex: " 50%" }}
                    >
                      <CDBBtn color="white" flat onClick={toggle(5)}>
                        Cancel
                      </CDBBtn>
                      <CDBBtn color="dark" flat>
                        Done
                      </CDBBtn>
                    </div>
                  </div>
                </CDBCardBody>
              </CDBCard>
            </CDBModal>
    </CDBContainer>
  );
};
export default  Modal;

Modal Positions

import React from "react";
import { CDBModal, CDBModalHeader, CDBModalBody, CDBModalFooter, CDBCardImage, CDBCardBody, CDBCardTitle, CDBCardText, CDBCard, CDBBtn, CDBContainer } from "cdbreact";
  const [state, setState] = useState({
    modal1: false,
    modal2: false,
    modal3: false,
    modal4: false,
    modal5: false,
    modal6: false,
    modal7: false,
    modal8: false,
    modal9: false,
  });
  const toggle = (nr) => () => {
    let modalNumber = "modal" + nr;
    setState({
      ...state,
      [modalNumber]: !state[modalNumber],
    });
  };
const Modal = () => {
  return (
    <CDBContainer>
          <CDBBtn color="dark" flat onClick={toggle(6)}>
            Top right
          </CDBBtn>
          <CDBModal
            isOpen={state.modal6}
            toggle={toggle(6)}
            side
            position="top-right"
          >
            <CDBModalHeader toggle={toggle(6)}>Title</CDBModalHeader>
            <CDBModalBody>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
            </CDBModalBody>
            <CDBModalFooter>
              <CDBBtn color="dark" flat onClick={toggle(6)}>
                Close
              </CDBBtn>
              <CDBBtn color="light" flat>
                Save changes
              </CDBBtn>
            </CDBModalFooter>
          </CDBModal>
          <CDBBtn color="dark" flat onClick={toggle(7)}>
            Bottom left
          </CDBBtn>
          <CDBModal
            isOpen={state.modal7}
            toggle={toggle(7)}
            side
            position="bottom-left"
          >
            <CDBModalHeader toggle={toggle(7)}>Title</CDBModalHeader>
            <CDBModalBody>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
            </CDBModalBody>
            <CDBModalFooter>
              <CDBBtn color="dark" flat onClick={toggle(7)}>
                Close
              </CDBBtn>
              <CDBBtn color="light" flat>
                Save changes
              </CDBBtn>
            </CDBModalFooter>
          </CDBModal>
          <CDBBtn color="dark" flat onClick={toggle(8)}>
            Top Left
          </CDBBtn>
          <CDBModal
            isOpen={state.modal8}
            toggle={toggle(8)}
            side
            position="top-left"
          >
            <CDBModalHeader toggle={toggle(8)}>Title</CDBModalHeader>
            <CDBModalBody>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
            </CDBModalBody>
            <CDBModalFooter>
              <CDBBtn color="dark" flat onClick={toggle(8)}>
                Close
              </CDBBtn>
              <CDBBtn color="light" flat>
                Save changes
              </CDBBtn>
            </CDBModalFooter>
          </CDBModal>
          <CDBBtn color="light" flat onClick={toggle(9)}>
            Bottom right
          </CDBBtn>
          <CDBModal
            isOpen={state.modal9}
            toggle={toggle(9)}
            side
            position="bottom-right"
          >
            <CDBModalHeader toggle={toggle(9)}>Title</CDBModalHeader>
            <CDBModalBody>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
            </CDBModalBody>
            <CDBModalFooter>
              <CDBBtn color="dark" onClick={toggle(6)}>
                Close
              </CDBBtn>
              <CDBBtn color="light" flat>
                Save changes
              </CDBBtn>
            </CDBModalFooter>
          </CDBModal>
          <CDBBtn color="light" flat onClick={toggle(9)}>
            Center
          </CDBBtn>
          <CDBModal isOpen={state.modal9} toggle={toggle(9)} side>
            <CDBModalHeader toggle={toggle(9)}>Title</CDBModalHeader>
            <CDBModalBody>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
            </CDBModalBody>
            <CDBModalFooter>
              <CDBBtn color="dark" onClick={toggle(6)}>
                Close
              </CDBBtn>
              <CDBBtn color="light" flat>
                Save changes
              </CDBBtn>
            </CDBModalFooter>
          </CDBModal>
    </CDBContainer>
  );
};
export default  Modal;

API

In this section you will find advanced information about the Modal component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Modal Import Statement

You need to import the Contrast Modal component first before using it.

import { CDBModal, CDBModalHeader, CDBModalBody, CDBModalFooter } from "cdbreact";

API Reference: Contrast Modal Properties

The table below shows the configuration options of the CDBModal component.

Name	Type	Default	Description	Example
className	String		Adds custom modal-content classes	<CDBModal className="myClass" ... />
wrapperClassName	String		Adds custom class to wrapper container	<CDBModal wrapperClassName="myClass" ... />
modalClassName	String		Adds custom modal-dialog element	<CDBModal modalClassName="myClass" ... />
contentClassName	String		Adds custom modal-content classes	<CDBModal contentClassName="myClass" ... />
backdropClassName	String		Adds custom class to modal-backdrop element	<CDBModal backdropClassName="myClass" ... />
disableBackdrop	Boolean	false	Disable backdrop if this prop is true.	<CDBModal disableBackdrop .../>
animation	String		Changes direction of animation. Choose from `top` / `bottom` / `right` / `left`.	<CDBModal animation="bottom" ... />
autoFocus	Boolean	true	Defines if modal should receive focus	<CDBModal autoFocus={false} .../>
backdrop	Boolean	true	If false, the backdrop is not rendered.	<CDBModal backdrop={false} .../>
cascading	Boolean	false	Adds cascading-class to modal-dialog element	<CDBModal cascading .../>
centered	Boolean	false	Add custom class to modal-dialog element	<CDBModal centered .../>
disableFocusTrap	Boolean	true	If true, removes focus trap effect.	<CDBModal disableFocusTrap={false} .../>
fade	Boolean	true	Removes transition	<CDBModal fade={false} .../>
frame	Boolean	false	Changes the position of the modal. It has to be used along with position prop equal to `bottom` / `top`	<CDBModal frame position="bottom" .../>
fullHeight	Boolean	false	Changes the position of the modal. It has to be used along with position prop equal to `bottom` / `top`	<CDBModal fullHeight position="bottom" .../>
isOpen	Boolean	true	If true, removes focus trap effect.	<CDBModal isOpen={Modal} .../>
keyboard	Boolean	true	Closes the modal when the escape key is pressed.	<CDBModal keyboard={false} .../>
labelledBy	String		Changes aria-labelledby attribute	<CDBModal labelledBy="myLabel" ... />
modalStyle	String		Predefines modal style. Choose one of success / `info` / `danger` / `warning`.	<CDBModal modalStyle="warning" ... />
position	String		Changes the position of the modal	<CDBModal position="top-right" ... />
side	Boolean	false	Changes the position of the modal. It has to be used along with position prop equal to `bottom-right`/`bottom-left`/`top-right`/`top-left`	<CDBModal side position="bottom-left" .../>
size	String		Changes the size of the modal. Choose from `sm` / `lg` / `fluid`	<CDBModal size="fluid" ... />
toggle	function		Defines function which fires on close/open event	<CDBModal toggle={myFunction} ... />
hiddenModal	function		This event is fired after the modal is closed.	<CDBModal hiddenModal={myFunction} ... />
hideModal	function		This event is fired just before the modal is hidden.	<CDBModal hideModal={myFunction} ... />
showModal	function		This event is fired just before the modal is open.	<CDBModal showModal={myFunction} ... />

API Reference: Contrast Modal Body Properties

The table below shows the configuration options of the CDBModalBody component.

Name	Type	Default	Description	Example
className	String		Adds custom class ModalBody component	<CDBModalBody className="myClass" ... />

API Reference: Contrast Modal Footer Properties

The table below shows the configuration options of the CDBModalFooter component.

Name	Type	Default	Description	Example
className	String		Adds custom class ModalFooter component	<CDBModalFooter className="myClass" ... />

API Reference: Contrast Modal Header Properties

The table below shows the configuration options of the CDBModalHeader component.

Name	Type	Default	Description	Example
className	String		Adds custom class ModalHeader component	<CDBModalHeader className="myClass" ... />
titleClass	String		Adds custom class to title element.	<CDBModalHeader titleClass="myTitleClass" ... />
closeArialLabel	String	Close	Defines custom label for close button	<CDBModalHeader closeArialLabel="myClass" ... />
toggle	function		Defines function which fires on close/open event	<CDBModalHeader toggle={myFunction} ... />
tag	String	h4	Defines custom tag for ModalHeader	<CDBModalHeader tag="h2" ... />

Rating

Select