0

Weird Background Color in Modal I've tried several things, but I couldn't remove that weird color in the Modal's background. for context, I'm using Tailwind, with Daisy UI, on Next.JS

<>
<button className='btn bg-gray-900 text-white border-none normal-case font-medium hover:bg-gray-900' onClick={()=>window.my_modal_1.showModal()}>Create Project</button>
<dialog id="my_modal_1" className="modal bg-transparent">
  <form method="dialog" className="modal-box bg-gray-900">
    <h3 className="font-bold text-lg">Project Information</h3>
    <br /><br />
    <input type="text" placeholder="Project's Name" onChange={(e) => {setName(e.target.value)}} className="input w-full max-w-xs bg-gray-950 font-bold border-none" />
    <br /><br />
    <input type="text" placeholder="Project's URL" onChange={(e) => {setUrl(e.target.value)}} className="input w-full max-w-xs bg-gray-950 font-bold border-none" />
    <br /><br />
    <button className="btn bg-indigo-700 text-white border-none hover:bg-indigo-800 normal-case" onClick={createProject}>Create Project</button>
    <br /><br />
    {response}
    <p className='text-red-500 font-medium'>
    {error}
    </p>
    <div className="modal-action">
      <button className="btn bg-gray-950 border-none hover:bg-gray-950 normal-case -mt-7 text-white">Close</button>
    </div>
  </form>
</dialog>
        </>
lunix
  • 33
  • 7

1 Answers1

1

Found an answer. My solution was to add a shadow-lg class to my modal:

    <dialog id="my_modal_1" className="modal shadow-lg bg-transparent">
BRO_THOM
  • 824
  • 9
  • 24
lunix
  • 33
  • 7