How to Style and Remove the React-Bootstrap Modal Backdrop

In this tutorial we will customize the styling of the React Bootstrap Backdrop and also show how to remove it. The modal has some great props for controlling the backdrop, but we still need to explore the modal styling with dev tools.

Here’s one of the modals we will build:

Full code is in the Resources section.

How to Change Background Color and Opacity of React Bootstrap Backdrop

The React Bootstrap modal has some great props for controlling the modal. One potentially useful class for styling the backdrop is backdropClassName, which lets us add a custom class to the backdrop.

Instead of adding a custom class, I customized the variable that Bootstrap uses in the backdrop:

$modal-backdrop-bg: green;
$modal-backdrop-opacity: 0.6;

@import "bootstrap/scss/bootstrap";

$modal-backdrop-bg is used to control the --bs-backdrop-bg value and is assigned in the _modal.scss file, and $modal-backdrop-opacity controls the --bs-backdrop-opacity value.

Another alternative for customizing the backdrop is to target the modal-backdrop class that exists on the backdrop by default. One thing to be careful about is that you select the div with modal-backdrop class instead of the div with class modal when exploring the backdrop in the DOM.

.modal-backdrop {
  margin:4px;
}

Of course you most likely don’t want margin on your backdrop, this is just an example to show the selector. Here’s how to set modal size.

How to Remove React Bootstrap Modal Backdrop

There are two ways to remove the modal backdrop:

• using the built-in prop (this is the best way)
• setting display: none on the modal

React Bootstrap provides a useful prop simply called backdrop. This accepts three values: "static", true, and false. If the value is set to false, then there is no backdrop when the modal is open. This removes the backdrop from being rendered and removes the div with class modal-backdrop from the DOM tree.

Another alternative is to set the backdrop to not display using CSS:

.modal-backdrop {
  display: none;
}

There are two problems with this. First, it is always wise to use props because there may be other features that the prop disables that we haven’t thought of. Second, in this case simply setting the backdrop to not display does not disable the close on click outside the backdrop. We definitely this disabled if the elements in the background appear clickable.

How to Keep Modal Open on Backdrop Click

If we want to keep the modal open on backdrop click, we need to use the "static" value of the backdrop prop.

<Modal backdrop="static" />

This renders the backdrop like normal (the default backdrop value is true) but when the backdrop is clicked, the modal does not close. Instead, there is a nice animation that briefly and mildly scales the backdrop up and down to indicate that the close button on the backdrop must be clicked to close it.

The purpose of the static backdrop is to emphasize the modal and make sure that the user has at least acknowledged the modal enough to click on it.

Here’s a tutorial on customizing the appearance of the modal close button.

Resources

Here is the code for this tutorial:

//CustomBackdropModal.tsx

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import "./CustomBackdropModal.scss";

export default function CustomBackdropModal() {
  const [show, setShow] = useState(false);
  const [backdrop, setBackdrop] = useState(true);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  const toggleBackdrop = () => setBackdrop(!backdrop);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Custom Backdrop
      </Button>

      <Modal show={show} onHide={handleClose} backdrop={backdrop ? "static" : false}>
        <Modal.Header
          closeButton
        >
          <Modal.Title>Nice Backdrop!</Modal.Title>
        </Modal.Header>
        <Modal.Body>Toggle the Backdrop!</Modal.Body>
        <Modal.Footer>
          <Button variant="primary" onClick={toggleBackdrop}>
            Add/Remove Backdrop
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

//CustomBackdropModal.scss

$modal-backdrop-bg: green;
$modal-backdrop-opacity: 0.6;

@import "bootstrap/scss/bootstrap";

// .modal-backdrop {
//   margin:4px;
// }