Search code examples
cssreactjsmodal-dialogreact-bootstrapreact-bootstrap4-modal

Background goes black when react-bootstrapv2.5.0 modal opens

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.

ss

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

  • 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.