當我的順風 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;
}
在這里我的模式正在打開，但整個螢屏沒有變成黑暗模式請任何人都可以解決這個問題提前謝謝
uj5u.com熱心網友回復：
可能您需要為模態容器添加特定樣式作為背景背景，例如自定義樣式：style="background-color: rgba(0,0,0,0.5);"
在您的代碼中，它應該如下所示：<div *ngIf="showModal" style="background-color: rgba(0,0,0,0.5);" vertical-align: inherit;">此外，您可以將特定的 '.backdrop' 類添加到根 styles.css 并將其用作類：
.backdrop {
background-color: rgba(0,0,0,0.5);
}
在 html 中：
<div *ngIf="showModal" https://i.stack.imgur.com/rmHx2.png" rel="nofollow noreferrer">此處為深色背景的順風螢屏示例
組件模板 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....
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/421068.html
標籤：
上一篇：配置Nginx以提供Angular的靜態檔案以及express的反向代理
下一篇：陣列格式問題