Hoje eu reclamei com o Copilot que a classe "bg-opacity-50" do Tailwind não funciona comigo, assim ele sugeriu utilizar um CSS clássico com um style inline:
arquivo resources > views > lorcamento.blade.php (listagem parcial)
@if($modal)
<div class="fixed inset-0 flex items-center
justify-center" style="background-color: rgba(0, 0, 0, 0.5)">
<div class="bg-white p-6 rounded shadow-lg w-96">
<h2 class="text-lg font-semibold">Mensagem</h2>
<p class="mt-2 text-gray-700 text-xl">{{$mensagem}}</p>
<flux:button wire:click="fecharModal" class="mt-4">
Fechar
</flux:button>
</div>
</div>
@endif
arquivo app > Livewire > Lorcamento.php (listagem parcial)
<?php
// ...
function bling($pedido,$vendido=null) {
if(is_null($vendido)) {
$this->mensagem="O pedido Bling só pode ser criado depois de registrar a venda";
$this->modal=true;
}
}
function fecharModal() {
$this->modal=false;
}