Background goes black when react-bootstrapv2.5.0 modal opens

Question

So Basilcally I am using this react-bootstrap modal.

I am using React with react-bootstrap components. I implemented it but when I opens it, instead of translucent background (opacity 0.5), the background appears black.

As you can see also . The background becomes black as I opens the modal and you can hardly see anything behind .

Using modal like this

<Modal
  {...props}
  size="lg"
  aria-labelledby="contained-modal-title-vcenter"
  centered
>
  <Modal.Header style={{ backgroundColor: "#E8EDF9" }}>
    <Modal.Title id="contained-modal-title-vcenter">
      More Coupon Details
    </Modal.Title>
  </Modal.Header>
  <Modal.Body style={{ backgroundColor: "#F2F4FA" }}>
    <div className=" py-3">
      <div className="p-6 space-y-4 ">
        <div color="" className="bg-gray-400">
          <div className="d-flex fs-5 align-items-baseline justify-content-start">
            <h4 className="fs-5 text-black">Coupon Code : </h4>
            <p className="ms-2">{detailComponent.couponCode}</p>
          </div>
        </div>

        <div className="d-flex align-items-center justify-content-start">
          <div className="d-flex fs-5 align-items-baseline justify-content-start me-5">
            <h4 className="fs-5 text-black">Max Discount Percent :</h4>
            <p className="ms-2 ">{detailComponent.maxDiscountPer} %</p>
          </div>
          <div className="d-flex fs-5 align-items-baseline justify-content-start ms-5">
            <h4 className="fs-5 text-black">Max Discount Absolute :</h4>
            <p className="ms-2 ">{detailComponent.maxDiscountAbs} %</p>
          </div>
        </div>

        <div className="d-flex align-items-center justify-content-start">
          <div className="d-flex fs-5 align-items-baseline justify-content-start me-5">
            <h4 className="fs-5 text-black">Maximum Usage User :</h4>
            <p className="ms-2 ">{detailComponent.maxUsageUser}</p>
          </div>
          <div className="d-flex fs-5 align-items-baseline justify-content-start ms-5">
            <h4 className="fs-5 text-black">Maximum Usage Overall :</h4>
            <p className="ms-2">{detailComponent.maxUsageOverall}</p>
          </div>
        </div>

        <div className="d-flex align-items-center justify-content-start">
          <div className="d-flex fs-5 align-items-baseline justify-content-start me-5">
            <h4 className="fs-5 text-black">Start Date :</h4>
            <p className="ms-2">{detailComponent.startDate}</p>
          </div>
          <div className="d-flex fs-5 align-items-baseline justify-content-start ms-2">
            <h4 className="fs-5 text-black">End Date :</h4>
            <p className="ms-2">{detailComponent.endDate}</p>
          </div>
        </div>

        <div className="d-flex fs-5 align-items-baseline justify-content-start">
          <h4 className="fs-5 text-black">Coupon Description :</h4>
          <p className="ms-2">{detailComponent.description}</p>
        </div>

        <div className="d-flex fs-5 align-items-baseline justify-content-start">
          <h4 className="fs-5 text-black">Landing Page :</h4>
          <p className="ms-2">{detailComponent.landingPage}</p>
        </div>

        <div className="d-flex fs-5 align-items-baseline justify-content-start">
          <h4 className="fs-5 text-black">Redeem Steps :</h4>
          <p className="ms-2">{detailComponent.redeemSteps}</p>
        </div>

        <div className="d-flex fs-5 align-items-baseline justify-content-start">
          <h4 className="fs-5 text-black">Terms and Conditions :</h4>
          <p className="ms-2">{detailComponent.tnc}</p>
        </div>

        <div className="d-flex col-12 fs-5 align-items-baseline justify-content-start">
          <h4 className="fs-5 col-4 text-black">Applicable Channels :</h4>
          <p className="">
            {detailComponent.applicableChannelsDTOList
              ? detailComponent.applicableChannelsDTOList.map((item) => {
                  return <span key={item}>{item}, </span>;
                })
              : detailComponent.applicableVerticalsDTOList}
          </p>
        </div>
      </div>
    </div>
  </Modal.Body>
  <Modal.Footer style={{ backgroundColor: "#E8EDF9" }}>
    <Button variant="danger" className="mx-auto" onClick={props.onHide}>
      Close
    </Button>
  </Modal.Footer>
</Modal>

I'm attaching the code of CSS files. (In case if any classes I used affect the default Modal Classes).

app.css

.no-border {
  border: 0;
  box-shadow: none;
}

.label {
  display: block;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  background-color: transparent;
  color: #111827;
  font-size: 0.8rem;
  line-height: 1.25rem;
  width: 100%;
  border-width: 0;
  border-bottom-width: 2px;
  border-color: #d1d5db;
  appearance: none;
}
.form {
  padding: 0.5rem;
  width: 100%;
  border-radius: 0.75rem;

  @media (min-width: 640px) {
    padding: 1rem;
  }
  @media (min-width: 768px) {
    width: 66.666667%;
  }
}

.drop {
  display: block;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  background-color: transparent;
  color: #111827;
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: 100%;
  border-width: 0;
  border-bottom-width: 2px;
  border-color: #e5e7eb;
  appearance: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  whitespace: nowrap;
  borderwidth: 0;
}

.vertical {
  display: inline-flex;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: 2rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  background-color: #e0e7ff;
  color: #000000;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-align: center;
  align-items: center;
  border-radius: 0.5rem;
}

.vertical:hover {
  background-color: #dbeafe;
}

.verticalBlock {
  display: block;
  background-color: #e0e7ff;
  width: 24rem;
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.verticalHidden {
  display: none;
  background-color: #e0e7ff;
  width: 24rem;
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.dropdownSearchButton {
  overflow-y: auto;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-bottom: 0.75rem;
  color: #374151;
  font-size: 0.875rem;
  line-height: 1.25rem;
  height: 12rem;
}

.verticalflex {
  display: flex;
  flex-direction: row;
}

.verticalflex2 {
  display: flex;
  padding-left: 0.5rem;
  align-items: center;
  border-radius: 0.25rem;
}

.verticalflex2:hover {
  background-color: #e0e7ff;
}

.verticalInput {
  background-color: #f3f4f6;
  color: #4f46e5;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border-color: #d1d5db;
}

.verticalLabel {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-left: 0.5rem;
  color: #111827;
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: 100%;
  border-radius: 0.25rem;
}

.verticalButton {
  display: flex;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  justify-content: space-between;
  align-items: center;
}

.doubleDropdownBlock {
  display: block;
  z-index: 10;
  margin: 0.5rem;
  background-color: #eef2ff;
  width: auto;
  border-radius: 0.25rem;
  border-top-width: 1px;
  border-color: #e0e7ff;
}

.doubleDropdownHidden {
  display: none;
  z-index: 10;
  margin: 0.5rem;
  background-color: #eef2ff;
  width: auto;
  border-radius: 0.25rem;
  border-top-width: 1px;
  border-color: #e0e7ff;
}

.doubleDropdownUl {
  display: flex;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  color: #374151;
  font-size: 0.875rem;
  line-height: 1.25rem;
  flex-direction: row;
}

.verticalTypeButton {
  display: block;
  padding: 0.25rem;
}
.verticalTypeButton:hover {
  background-color: #c7d2fe;
}

.verticalTypeButtonLabel {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.landing1 {
  position: relative;
  z-index: 0;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.landing2 {
  display: block;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  background-color: transparent;
  color: #111827;
  font-size: 0.875rem;
  line-height: 1.25rem;
  width: 100%;
  border-width: 0;
  border-bottom-width: 2px;
  border-color: #d1d5db;
  appearance: none;
}

.landing3 {
  position: absolute;
  top: 0.75rem;
  transition-duration: 300ms;
  --transform-scale-x: 0.75;
  --transform-scale-y: 0.75;
  --transform-translate-y: -1.5rem;
  color: #374151;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: url("./assets/banner02.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.no-border {
  border: 0;
  box-shadow: none;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

Answer 1

So I made some manipulations to the @Cervus's answer and come to this solution.

.modal-backdrop
{
    --bs-backdrop-bg: rgb(0 0 0 / 30%) !important;
}

This works for me.

Answer 2

The provided screenshot indicates you have more than one .modal-backdrop.show element in DOM, when opening the modal.

This could be caused by any of the following (I doubt the list is exhaustive):

• nested modals (modals within modals)
• duplicated modal ids (present in DOM at runtime)
• faulty modal implementation, not deleting the .modal-backdrop when closed, causing it to have +1 backdrops on each subsequent opening.

You haven't provided sufficient code to determine the cause (or repro the issue), so I can only provide a solution which hides the problem, without fixing the bug source:

.modal-backdrop:not(#_) ~ .modal-backdrop,
body:not(.modal-open) .modal-backdrop {
  display: none;
}

I don't recommend it, (it's hiding the dust under the rug). Instead, you should find and fix the bug source.

Answer 3

Darker background is caused by this:

.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity);
}

First, try this:

.modal-backdrop.show {
  opacity: 1;
}

This should remove opacity entirely. If not, then you probably applied opacity on top of opacity, and that's why it's so dark. Check where you applied opacity for the second time.