CODEWITHSUNDEEP
cssangulartailwind-css
Amir Shahzad
Amir Shahzad

Reputation: 222

How to turn page background color dark when tailwind css modal is open in angular13

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

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

Upvotes: 3

Views: 5710

Answers (1)

Vadim
Vadim

Reputation: 56

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);" class="overflow-x-hidden...

Also, you can add the specific '.backdrop' class to the root styles.css and use it as class:

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

in html:

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

tailwind screen example with the dark background here

the component template html looks like that:

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

Upvotes: 4

Related Questions