Modal Backdrop

React Bootstrap 5 Modal Backdrop 

React Backdrop options for a responsive popup with Bootstrap 5. Prevent close on click outside with static backdrop, remove backdrop, enable interactivity & more.

Basic example

Default modal backdrop is a delicate shadow overlaying the rest of the page design.

        
             
      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} setShow={setBasicModal} 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>
          </>
        );
      }

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,
        MDBContainer,
      } 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}
              setShow={setStaticModal}
            >
              <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>
          </>
        );
      }

No Backdrop

If you would like to get rid of the backdrop, you can set the backdrop attribute to false.

        
             
      import React, { useState } from "react";
      import {
        MDBBtn,
        MDBModal,
        MDBModalDialog,
        MDBModalContent,
        MDBModalHeader,
        MDBModalTitle,
        MDBModalBody,
        MDBModalFooter,
        MDBContainer,
      } from "mdb-react-ui-kit";
      
      export default function App() {
        const [noBackdropModal, setNoBackdropModal] = useState(false);
      
        const toggleShow = () => setNoBackdropModal(!noBackdropModal);
      
        return (
          <MDBContainer className="p-5">
            <MDBBtn onClick={toggleShow}>Launch static backdrop modal</MDBBtn>
      
            <MDBModal
              backdrop={false}
              tabIndex="-1"
              show={noBackdropModal}
              setShow={setNoBackdropModal}
            >
              <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>
          </MDBContainer>
        );
      }

Remove backdrop (with interactivity)

This type of modal does not block any interaction on the page. Simply set nonInvasive property to true. 

        
             
      import React, { useState } from 'react';
      import {
        MDBBtn,
        MDBModal,
        MDBModalDialog,
        MDBModalContent,
        MDBModalHeader,
        MDBModalTitle,
        MDBModalBody,
        MDBModalFooter,
      } from 'mdb-react-ui-kit';
      
      export default function App() {
        const [nonInvasiveModal, setNonInvasiveModal] = useState(false);
      
        const toggleShow = () => setNonInvasiveModal(!nonInvasiveModal);
      
        return (
          <>
            <MDBBtn onClick={toggleShow}>Non Invasive Modal</MDBBtn>
            <MDBModal tabIndex={-1} show={nonInvasiveModal} setShow={setNonInvasiveModal} nonInvasive={true}>
              <MDBModalDialog size='fullscreen-xl-down'>
                <MDBModalContent>
                  <MDBModalHeader>
                    <MDBModalTitle>Non Invasive Modal</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>
          </>
        );
      }