模态背景 - 如何去除背景颜色

Question

将 livewire 添加到我的 laravel 项目后，每个抽屉/模式弹出窗口都会创建一个背景，隐藏弹出窗口下的所有内容。我已经设法摆脱抽屉背景，但很快意识到我需要它能够关闭侧面菜单，所以我只需要更改颜色。

我的问题是我应该在哪里更改背景颜色？有设置文件吗？或者我应该向模式/抽屉添加一些类？

这是打开模式时出现的元素

<div modal-backdrop="" class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"></div>

刀片文件

@extends('layouts.app')

@section('content')
<button class="btn" data-modal-target="crud-modal" data-modal-toggle="crud-modal" type="button">
        ...
    </button>
    <div class="fixed left-0 right-0 top-0 z-50 hidden h-screen items-center justify-center bg-transparent" id="crud-modal"
         aria-hidden="true" tabindex="-1">
        <div class="relative w-6/12 rounded-lg bg-gray-700 p-10 text-white shadow">
            <div class="flex items-center justify-between rounded-t border-b dark:border-zinc-800 md:p-5">
                <button class="btn" data-modal-toggle="crud-modal" type="button">
                    ...
                </button>
            </div>
            <form class="space-y-4" method="POST" action="{{ route('warehouse') }}" method="POST" enctype="multipart/form-data">
                @csrf
                ...
            </form>
        </div>
    </div>
@endsection

我尝试用 data-modal-backdrop="false" 的每个变体删除模态窗口，我可以找到但它们都不起作用。我试图找到如何设置它的样式，但由于它没有 id，我不知道如何访问它..

Answer 1

您似乎正在为 Laravel 项目使用 Livewire 和 Tailwind CSS 样式。您描述的问题与模态窗口的背景有关，该模态窗口是使用元素创建的。

要更改此背景的颜色，您需要修改与此类关联的样式。您可以使用自己的样式或将其添加到 CSS 文件中，或者直接将它们添加到 HTML 文件中。在您的情况下，您想要更改 bg-gray-900 类的背景颜色，即背景颜色：#111827;。

以下是如何更改此颜色的示例：

<style>
    .bg-gray-900 {
        background-color: #your-desired-color;
    }
</style>

将此添加到您的 Blade 模板或将其包含在您的 CSS 文件之一中。将 #your-desired-color 替换为您想要的颜色。