Background goes black when react-bootstrapv2.5.0 modal opens-CodePudding

So Basilcally I am using

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;
}

CodePudding user response：

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.

CodePudding user response：

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 implementations, not deleting the .modal-backdrop when closed, causing it to have 1 backdrops on any subsequent opening.

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

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

On general principles, I recommend against using the patch above (it's hiding the dust under the rug). Instead, you should find and fix the bug source.