Question 292337 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – Modal backdrop – how to remove background color

After adding livewire to my laravel project, every drawer / modal popup window creates a background, that hides everything under the pop-up window. I have managed to get rid of the drawer background, but soon realized i need it to be able to close the side menu, so i just need to change the color.

My question is where should I change the bg color? Is there a setting file? Or should i add some class to the modal / drawer?

This is the element that appers on opening the modal

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

The blade file

@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

I tried removing the modal window with every variation of data-modal-backdrop="false", that i could find but none of them worked. I tried to find how to style it, but since it doesnt have id i dont know how to access it..

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Change the classes bg-gray-900 bg-opacity-50 dark:bg-opacity-80 to what you want your backdrop to look like. There's a list of available colors.

    Posted by @brombeer


  2. 0

    It seems like you are using Livewire along with Tailwind CSS styling for your Laravel project. The issue you described is related to the background of the modal window, which is created using the element .

    To change the color of this background, you need to modify the styles associated with this class. You can either use or add your own styles to your CSS file, or directly add them to the HTML file. In your case, you want to change the background color for the class bg-gray-900, which is background-color: #111827;.

    Here’s an example of how you can change this color:

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

    Add this to your Blade template or include it in one of your CSS files. Replace #your-desired-color with your desired color.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search