0

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;
}
tao
  • 82,996
  • 16
  • 114
  • 150
MagnusEffect
  • 3,363
  • 1
  • 16
  • 41
  • It looks like you're opening the modal multiple times, thus generating multiple backdrops. The provided code is not sufficient to repro the issue, which makes the question useless to yourself and to any potential future users with a similar problem. It also makes the question *off-topic*. Include sufficient code to repro. Ideally, you should provide a *runnable* [mcve]. Please note codesandbox allows [importing](https://codesandbox.io/docs/learn/getting-started/your-first-sandbox#import-local-projects-via-cli) local projects via CLI. – tao Nov 02 '22 at 17:30

3 Answers3

1

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.

Rok Benko
  • 14,265
  • 2
  • 24
  • 49
1

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.

tao
  • 82,996
  • 16
  • 114
  • 150
0

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.

MagnusEffect
  • 3,363
  • 1
  • 16
  • 41