Finalmente, consegui um modal semi-transparente

[Frank K Hosaka]

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;
    }

 

Editado Maio 2 por Frank K Hosaka

[Frank K Hosaka]

Fiz um ajuste para o modal informar ou solicitar informação do usuário. Ele funciona no notebook, não ficou nada legal no celular e não tenho um tablet para testar:

 

arquivo resources > views > livewire > lorcamento.blade.php
<div>
    @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">
                <h2 class="text-lg font-semibold">Mensagem</h2>
                <p class="mt-2 text-gray-700 text-xl whitespace-nowrap">{{$mensagem}}</p>
                @if($modal2)
                    <flux:input wire:model="bling" wire:change="gerarBling" />
                @endif
                <flux:button wire:click="fecharModal" class="mt-2">
                    Fechar
                </flux:button>
            </div>
        </div>
    @endif
    <!-- listagem parcial -->
</div>

arquivo app > Livewire > Lorcamento.php
<?php
namespace App\Livewire;
use App\Models\tbhistped;
use App\Models\tbpedido;
use App\Models\tbpessoa;
use App\Models\tbprod;
use Livewire\Attributes\Layout;
use Livewire\Component;

#[Layout('components.layouts.app',['titulo'=>'Orçamento'])]
class Lorcamento extends Component {

    public $bling,$histped,$mensagem,$modal,$modal2;
    public $pedido,$pessoa,$procPed,$prod,$qt,$vendido,$vr=[];

    function apagarBling($pedido) {
        tbpedido::where('ped',$pedido)->update(['bling'=>null]);
        $this->montarPedido($pedido);
    }
    
    function blingar($vendido=null) {
        if(is_null($vendido)) {
            $this->mensagem="O pedido Bling só pode ser criado depois de registrar a venda";
            $this->modal=true;
        } else {
            $this->mensagem="Número do pedido Bling";
            $this->modal=true;
            $this->modal2=true;
        }
    }

    function blingProximo() {
        $numeros=tbpedido::whereNotNull('bling')->orderBy('bling')->get();
        $intervalos=[];
        $inicio=$fim=$numeros[0]->bling;
        foreach($numeros as $numero) {
            if($numero->bling == $fim || $numero->bling == $fim + 1) {
                $fim=$numero->bling;
            } else {
                $intervalos[]=($inicio==$fim) ? $inicio : "$inicio-$fim";
                $inicio=$fim=$numero->bling;
            }
        }
        $intervalos[]=($inicio==$fim) ? $inicio : "$inicio-$fim";
        $this->mensagem="Pedidos já utilizados: ";
        foreach($intervalos as $key => $i) {
            $this->mensagem .= $i;
            if($key===array_key_last($intervalos)) {
                $this->mensagem .= ".";
            } else {
                $this->mensagem .= ",";
            }
        }
        $this->modal=true;
    }

    function fecharModal() {
        $this->modal=false;
        $this->modal2=false;
    }

	// listagem parcial

}

 

Editado Maio 3 por Frank K Hosaka