How to turn screen of page in the dark color when tailwind css modal open in angular?-CodePudding

I want to turn my entire screen into the grey when my tailwind css modal open in my angular app but the screen remain white after modal open Please anyone can solve this

this is my html code

  <button  type="button" (click)="toggleModal()">
     Open  modal
  </button>

  <div *ngIf="showModal" >
  <div >
    <!--content-->
    <div >
      <!--header-->
      <div >
        <h3 >
          Modal Title
        </h3>
        <button  (click)="toggleModal()">
          <span >
            ×
          </span>
        </button>
      </div>
      <!--body-->
      <div >
        <p >
          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 >
        <button  type="button" (click)="toggleModal()">
          Close
        </button>
        <button  type="button" (click)="toggleModal()">
          Save Changes
        </button>
      </div>
    </div>
  </div>
</div>

This is my typescript code to open modal

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

Here my modal is opening but the entire screen is not turning into the dark mode Please anyone can solve this Thanks in advance

CodePudding user response：

Probably you need to add the specific style for your modal container as backgrop background, like custom style: style="background-color: rgba(0,0,0,0.5);" In your code it should be look like: <div *ngIf="showModal" style="background-color: rgba(0,0,0,0.5);" showModal" https://i.stack.imgur.com/rmHx2.png" rel="nofollow noreferrer">tailwind screen example with the dark background here