在angular13中打开顺风css模式时如何使页面背景色变暗

Question

我想把我的整个屏幕变成灰色当我的顺风css模式打开在我的角度应用程序，但屏幕保持白色后模态打开请任何人都可以解决这个

这是我的html代码

  <button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
     Open  modal
  </button>

  <div *ngIf="showModal" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
  <div class="relative w-auto my-6 mx-auto max-w-3xl">
    <!--content-->
    <div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
      <!--header-->
      <div class="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
        <h3 class="text-3xl font-semibold">
          Modal Title
        </h3>
        <button class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" (click)="toggleModal()">
          <span class="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
            ×
          </span>
        </button>
      </div>
      <!--body-->
      <div class="relative p-6 flex-auto">
        <p class="my-4 text-blueGray-500 text-lg leading-relaxed">
          I always felt like I could do anything. That’s the main
          thing people are controlled by! Thoughts- their perception
          of themselves! They're slowed down by their perception of
          themselves. If you're taught you can’t do anything, you
          won’t do anything. I was taught I could do everything.
        </p>
      </div>
      <!--footer-->
      <div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
        <button class="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
          Close
        </button>
        <button class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
          Save Changes
        </button>
      </div>
    </div>
  </div>
</div>

这是我打开模式的打字码

  showModal:boolean = false;
  toggleModal(){
   this.showModal = !this.showModal;
  }

在这里，我的模式是开放的，但是整个屏幕没有变成黑暗模式，请任何人都可以解决这个问题，谢谢提前

Answer 1

您可能需要将模态容器的特定样式添加为backgrop背景，如代码中的自定义样式：style="background-color: rgba(0,0,0,0.5);" (它应该是：<div *ngIf="showModal" style="background-color: rgba(0,0,0,0.5);" class="overflow-x-hidden... )。

此外，还可以将特定的'.backdrop‘类添加到根styles.css中，并将其用作类：

    .backdrop {
  background-color: rgba(0,0,0,0.5);
}

在html中：

<div *ngIf="showModal" class="backdrop overflow-x-hidden overflow-y-auto...

这里有暗背景的顺风屏幕示例

组件模板html如下所示：

<button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
  Open  modal
</button>

<div *ngIf="showModal" class="backdrop overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
//.......the rest code is the same....