Modal

React Bootstrap 5 Modal component

Use MDB modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Note: Read the API tab to find all available options and advanced customization


Basic example

Click the button to launch the modal.


          import React, { useState } from 'react';
          import { MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [basicModal, setBasicModal] = useState(false);

            const toggleShow = () => setBasicModal(!basicModal);

            return (
              <>
              <MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
              <MDBModal show={basicModal} getOpenState={(e: any) => setBasicModal(e)} tabIndex='-1'>
                <MDBModalDialog>
                  <MDBModalContent>
                    <MDBModalHeader>
                      <MDBModalTitle>Modal title</MDBModalTitle>
                      <MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
                    </MDBModalHeader>
                    <MDBModalBody>...</MDBModalBody>
  
                    <MDBModalFooter>
                      <MDBBtn color='secondary' onClick={toggleShow}>
                        Close
                      </MDBBtn>
                      <MDBBtn>Save changes</MDBBtn>
                    </MDBModalFooter>
                  </MDBModalContent>
                </MDBModalDialog>
              </MDBModal>
              </>
            );
          }
        

Advanced examples

Click the buttons to launch the modals.

Frame modal

MDB graphics

Position


Side modal

MDB graphics

Position




Central modal

MDB graphics

Size






Modal components

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.


          import React, { useState } from 'react';
          import { MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [basicModal, setBasicModal] = useState(false);

            const toggleShow = () => setBasicModal(!basicModal);

            return (
              <>
                <MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
                <MDBModal show={basicModal} getOpenState={(e: any) => setBasicModal(e)} tabIndex='-1'>
                  <MDBModalDialog>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal title</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>Modal body text goes here.</MDBModalBody>
    
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={toggleShow}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
        

Position

To change the position of the modal add one of the following props to the MDBModalDialog

Top right: side + position="top-right"

Top left: side + position="top-left"

Bottom right: side + position="bottom-right"

Bottom left: side + position="bottom-left"

Note: If you want to change the direction of modal animation, add the prop{' '} animationDirection, top, bottom or left to the{' '} Modal component.


Frame

To make the modal "frame-like" add frame prop to the MDBModalDialog element. You also need to specify the direction by adding position="bottom" or position="top" to the MDBModalDialog.


Static backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.


          import React, { useState } from 'react';
          import { MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [staticModal, setStaticModal] = useState(false);

            const toggleShow = () => setStaticModal(!staticModal);

            return (
              <>
                <MDBBtn onClick={toggleShow}>Launch static backdrop modal</MDBBtn>

                <MDBModal staticBackdrop tabIndex='-1' show={staticModal} getOpenState={(e: any) => setStaticModal(e)}>
                  <MDBModalDialog>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal title</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>...</MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={toggleShow}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Understood</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
        

Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

You can also create a scrollable modal that allows scroll the modal body by adding scrollable to MDBModalDialog.


          import React, { useState } from 'react';
          import { MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [scrollableModal, setScrollableModal] = useState(false);

            return (
              <>
                <MDBBtn onClick={() => setScrollableModal(!scrollableModal)}>LAUNCH DEMO MODAL</MDBBtn>

                <MDBModal show={scrollableModal} getOpenState={(e: any) => setScrollableModal(e)} tabIndex='-1'>
                  <MDBModalDialog scrollable>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal title</MDBModalTitle>
                        <MDBBtn
                          className='btn-close'
                          color='none'
                          onClick={() => setScrollableModal(!scrollableModal)}
                        ></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>
                        <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>
                        <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>
                      </MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={() => setScrollableModal(!setScrollableModal)}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
        

Vertically centered

Add centered to MDBModalDialog to vertically center the modal.


          import React, { useState } from 'react';
          import { MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [centredModal, setCentredModal] = useState(false);

            const toggleShow = () => setCentredModal(!centredModal);

            return (
              <>
                <MDBBtn onClick={toggleShow}>Vertically centered modal</MDBBtn>

                <MDBModal tabIndex='-1' show={centredModal} getOpenState={(e: any) => setCentredModal(e)}>
                  <MDBModalDialog centered>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal title</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>
                        <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>
                      </MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={toggleShow}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
        

Tooltips and popovers

Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.


          import React, { useState } from 'react';
          import { 
            MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter,
            MDBPopover,
            MDBPopoverHeader,
            MDBPopoverBody,
            MDBTooltip
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [popoverModal, setPopoverModal] = useState(false);

            const toggleShow = () => setPopoverModal(!popoverModal);

            return (
              <>
                <MDBBtn onClick={toggleShow}>Launch demo modal</MDBBtn>

                <MDBModal tabIndex='-1' show={popoverModal} getOpenState={(e: any) => setPopoverModal(e)}>
                  <MDBModalDialog>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal title</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>
                        <h5>Popover in a modal</h5>
                        <p>
                          This
                          <MDBPopover isOpen={popoverModal} color='secondary' btnChildren='button' placement='right'>
                            <MDBPopoverHeader>Popover title</MDBPopoverHeader>
                            <MDBPopoverBody>Popover body content is set in this attribute.</MDBPopoverBody>
                          </MDBPopover>
                          triggers a popover on click.
                        </p>
                        <hr />
                        <h5>Tooltips in a modal</h5>
                        <p>
                          <MDBTooltip tag='a' wrapperProps={{ href: '#!' }} title='Tooltip'>
                            This link
                          </MDBTooltip>{' '}
                          and{' '}
                          <MDBTooltip tag='a' wrapperProps={{ href: '#!' }} title='Tooltip'>
                            that link
                          </MDBTooltip>{' '}
                          have tooltips on hover.
                        </p>
                      </MDBModalBody>

                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={toggleShow}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
        

Using the grid

Utilize the Bootstrap grid system within a modal by nesting .container-fluid within the .modal-body. Then, use the normal grid system classes as you would anywhere else.


          import React, { useState } from 'react';
          import { MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [gridModal, setGridModal] = useState(false);

            const toggleShow = () => setGridModal(!gridModal);

            return (
              <>
                <MDBBtn onClick={toggleShow}>Launch demo modal</MDBBtn>

                <MDBModal tabIndex='-1' show={gridModal} getOpenState={(e: any) => setGridModal(e)}>
                  <MDBModalDialog>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Grids in modals</MDBModalTitle>
                        <MDBBtn
                          type='button'
                          className='btn-close'
                          color='none'
                          onClick={toggleShow}
                        ></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>
                        <div className='container-fluid bd-example-row'>
                          <div className='row'>
                            <div className='col-md-4 col-example'>.col-md-4</div>
                            <div className='col-md-4 ms-auto col-example'>.col-md-4 .ms-auto</div>
                          </div>
                          <div className='row'>
                            <div className='col-md-3 ms-auto col-example'>.col-md-3 .ms-auto</div>
                            <div className='col-md-2 ms-auto col-example'>.col-md-2 .ms-auto</div>
                          </div>
                          <div className='row'>
                            <div className='col-md-6 ms-auto col-example'>.col-md-6 .ms-auto</div>
                          </div>
                          <div className='row'>
                            <div className='col-sm-9 col-example'>
                              Level 1: .col-sm-9
                              <div className='row'>
                                <div className='col-8 col-sm-6 col-example'>Level 2: .col-8 .col-sm-6</div>
                                <div className='col-4 col-sm-6 col-example'>Level 2: .col-4 .col-sm-6</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={toggleShow}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
        

Varying modal content

Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and HTML data-mdb-* attributes to vary the contents of the modal depending on which button was clicked.

Below is a live demo followed by example HTML and JavaScript. For more information, read the modal API/events doc for details on relatedTarget.


          import React, { useState } from 'react';
          import { MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
            MDBInput,
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [varyingState, setVaryingState] = useState('');
            const [varyingModal, setVaryingModal] = useState(false);
            const [varyingRecipient, setVaryingRecipient] = useState('');
            const [varyingMessage, setVaryingMessage] = useState('');

            const onChangeRecipient = (event: any) => {
              setVaryingRecipient(event.target.value);
            };
          
            const onChangeMessage = (event: any) => {
              setVaryingMessage(event.target.value);
            };

            return (
              <>
                <MDBBtn
                  onClick={() => {
                    setVaryingState('@mdo');
                    setVaryingModal(!varyingModal);
                    setVaryingRecipient('@mdo');
                  }}
                >
                  Open modal for @mdo
                </MDBBtn>
                <MDBBtn
                  onClick={() => {
                    setVaryingState('@fat');
                    setVaryingModal(!varyingModal);
                    setVaryingRecipient('@fat');
                  }}
                >
                  Open modal for @fat
                </MDBBtn>
                <MDBBtn
                  onClick={() => {
                    setVaryingState('@getbootstrap');
                    setVaryingModal(!varyingModal);
                    setVaryingRecipient('@getbootstrap');
                  }}
                >
                  Open modal for @getbootstrap
                </MDBBtn>

                <MDBModal show={varyingModal} getOpenState={(e: any) => setVaryingModal(e)} tabIndex='-1'>
                  <MDBModalDialog>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>New message to {varyingState}</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={() => setVaryingModal(!varyingModal)}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>
                        <form>
                          <div className='mb-3'>
                            {varyingModal && (
                              <MDBInput
                                value={varyingRecipient}
                                onChange={onChangeRecipient}
                                labelclassName='col-form-label'
                                label='Recipient:'
                              />
                            )}
                          </div>
                          <div className='mb-3'>
                            {varyingModal && (
                              <MDBInput
                                value={varyingMessage}
                                onChange={onChangeMessage}
                                textarea
                                labelclassName='col-form-label'
                                label='Message:'
                              />
                            )}
                          </div>
                        </form>
                      </MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={() => setVaryingModal(!varyingModal)}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
        

Toggle between modals

Toggle between multiple modals with some clever placement of the data-mdb-target and data-mdb-toggle attributes. For example, you could toggle a password reset modal from within an already open sign in modal. Please note multiple modals cannot be open at the same time—this method simply toggles between two separate modals.

Below is a live demo followed by example HTML and JavaScript. For more information, read the modal API/events doc for details on relatedTarget.

Open first modal

          import React, { useState } from 'react';
          import { MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [toggleOneModal, setToggleOneModal] = useState(false);
            const [toggleTwoModal, setToggleTwoModal] = useState(false);
            
            return (
              <>
                <MDBBtn onClick={() => setToggleOneModal(!toggleOneModal)}>OPEN FIRST MODAL</MDBBtn>

                <MDBModal show={toggleOneModal} getOpenState={(e: any) => setToggleOneModal(e)} tabIndex='-1'>
                  <MDBModalDialog centered>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal 1</MDBModalTitle>
                        <MDBBtn
                          className='btn-close'
                          color='none'
                          onClick={() => setToggleOneModal(!toggleOneModal)}
                        ></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>Show a second modal and hide this one with the button below.</MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn
                          onClick={() => {
                            setToggleOneModal(!toggleOneModal);
                            setTimeout(() => {
                              setToggleTwoModal(!toggleTwoModal);
                            }, 400);
                          }}
                        >
                          Open second modal
                        </MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
    
                <MDBModal show={toggleTwoModal} getOpenState={(e: any) => setToggleTwoModal(e)} tabIndex='-1'>
                  <MDBModalDialog centered>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal 2</MDBModalTitle>
                        <MDBBtn
                          className='btn-close'
                          color='none'
                          onClick={() => setToggleTwoModal(!toggleTwoModal)}
                        ></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>Hide this modal and show the first with the button below.</MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn
                          onClick={() => {
                            setToggleTwoModal(!toggleTwoModal);
                            setTimeout(() => {
                              setToggleOneModal(!toggleOneModal);
                            }, 400);
                          }}
                        >
                          Back to first
                        </MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
        

Optional sizes

Modals have three optional sizes, available via modifier props to be placed on aMDBModalDialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Size Prop Modal max-width
Small size="sm" 300px
Default None 500px
Large size="lg" 800px
Extra large size="xl" 1140px

          import React, { useState } from 'react';
          import { MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [optSmModal, setOptSmModal] = useState(false);

            const toggleShow = () => setOptSmModal(!optSmModal);

            return (
              <>
                <MDBBtn onClick={toggleShow}>Small modal</MDBBtn>
                <MDBModal show={optSmModal} tabIndex='-1' getOpenState={(e: any) => setOptSmModal(e)}>
                  <MDBModalDialog size='sm'>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Small modal</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>...</MDBModalBody>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
        

Fullscreen Modal

Another override is the option to pop up a modal that covers the user viewport, available via modifier props that are placed on a MDBModalDialog.

Prop Availability
size="fullscreen" Always
size="fullscreen-sm-down" Below 576px
size="fullscreen-md-down" Below 768px
size="fullscreen-lg-down" Below 992px
size="fullscreen-xl-down" Below 1200px
size="fullscreen-xxl-down" Below 1400px

          import React, { useState } from 'react';
          import { MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [fullscreenXlModal, setFullscreenXlModal] = useState(false);

            const toggleShow = () => setFullscreenXlModal(!fullscreenXlModal);

            return (
              <> 
                <MDBBtn onClick={toggleShow}>Full screen below xl</MDBBtn>
                <MDBModal tabIndex='-1' show={fullscreenXlModal} getOpenState={(e: any) => setFullscreenXlModal(e)}>
                  <MDBModalDialog size='fullscreen-xl-down'>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Full screen below xl</MDBModalTitle>
                        <MDBBtn
                          type='button'
                          className='btn-close'
                          color='none'
                          onClick={toggleShow}
                        ></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>...</MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn type='button' color='secondary' onClick={toggleShow}>
                          Close
                        </MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
        

Modal - API


Import


        import {
          MDBModal,
          MDBModalDialog,
          MDBModalContent,
          MDBModalHeader,
          MDBModalTitle,
          MDBModalBody,
          MDBModalFooter, 
        } from 'mdb-react-ui-kit';
      

Properties

MDBModal

Name Type Default Description Example
tag String 'div' Defines tag of the MDBModal element <MDBModal tag="section" />
className String '' Add custom class to MDBModal <MDBModal className="class" />
animationDirection String '' Defines animation direction of the modal <MDBModal animationDirection="top" />
backdrop Boolean true Sets a backrop for modal <MDBModal backdrop={false} />
closeOnEsc Boolean true Allows to close modal on Escape keydown <MDBModal closeOnEsc={false} />
tabIndex String '' Defines a tabindex attribute of the modal <MDBModal tabIndex="-1" />
show Boolean false Sets visibility of the modal <MDBModal show={true} />
staticBackdrop Boolean false Creates static backdrop for the modal <MDBModal staticBackdrop />

MDBModalDialog

Name Type Default Description Example
tag String 'div' Defines tag of the MDBModalDialog element <MDBModalDialog tag="section" />
className String '' Add custom class to MDBModalDialog <MDBModalDialog className="class" />
centered boolean false Vertically centeres modal dialog window <MDBModalDialog centered />

MDBModalContent

Name Type Default Description Example
tag String 'div' Defines tag of the MDBModalContent element <MDBModalContent tag="section" />
className String '' Add custom class to MDBModalContent <MDBModalContent className="class" />

MDBModalHeader

Name Type Default Description Example
tag String 'div' Defines tag of the MDBModalHeader element <MDBModalHeader tag="section" />
className String '' Add custom class to MDBModalHeader <MDBModalHeader className="class" />

MDBModalTitle

Name Type Default Description Example
tag String 'div' Defines tag of the MDBModalTitle element <MDBModalTitle tag="h3" />
className String '' Add custom class to MDBModalTitle <MDBModalTitle className="class" />

MDBModalBody

Name Type Default Description Example
tag String 'div' Defines tag of the MDBModalBody element <MDBModalBody tag="section" />
className String '' Add custom class to MDBModalBody <MDBModalBody className="class" />