Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
i want to display a modal when I click a button but after clicking button I don't see any modal below is the button I click to get the modal
<a href="#" wire:click="addUserFine({{ $member->id }})"
class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-600 dark:hover-bg-red-700 dark:focus:ring-red-800">Fine 5</a>
and below is the blade file, that is the modal I want to show
<!DOCTYPE html>
<html>
<head>
<!-- Your head content -->
</head>
<body>
<!-- Your body content -->
<div wire:ignore.self id="addUserFine" tabindex="-1" aria-hidden="true" class="fixed left-0 right-0 z-50 items-center justify-center hidden overflow-x-hidden overflow-y-auto top-4 md:inset-0 h-modal sm:h-full" id="addUserFine" tabindex="-1" aria-hidden="true">
<div class="relative w-full max-h-full max-w-2xl px-4 md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow-2xl dark:bg-gray-800">
<!-- Modal header -->
<div class="flex items-start justify-between p-5 border-b rounded-t dark:border-gray-700">
<h3 class="text-xl font-semibold dark:text-white">
Add new Region
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover-text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark-hover:bg-gray-700 dark-hover-text-white" x-on:click="$dispatch('closeModal', {id: 'addUserFine'})">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<h3>Assigned Fines</h3>
@if (!empty($userFines))
<ul>
@foreach ($userFines as $userFine)
<li>{{ $userFine->fine->name }} - Amount: {{ $userFine->fine_amount }}</li>
@endforeach
</ul>
@else
<p><strong>There are no fines assigned to this user!!</strong></p>
@endif
<form wire:submit.prevent="save">
<h3>Assign Fines</h3>
<div class="grid grid-cols-6 gap-6">
@forelse ($fines as $item)
<div class="col-span-6 sm:col-span-3">
<input id="checkbox-{{ $item->id }}" type="checkbox" wire:model="fine_id.{{ $item->id }}"
value="{{ $item->id }}"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-{{ $item->id }}"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{ $item->name }}</label>
</div>
@empty
<p><strong>No fines available to assign.</strong></p>
@endforelse
</div>
@error('fine_id') <span class="text-red-500">{{ $message }}</span> @enderror
<div class="items-center p-6 border-t border-gray-200 rounded-b dark:border-gray-700">
<button class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
type="submit">Assign Fine</button>
</div>
</form>
<!-- You can place your Livewire component content here -->
@livewire('userfine')
</div>
</div>
</div>
</div>
@livewireScripts
</body>
</html>
and below is the content of my component Usefine.php
<?php
namespace App\Livewire\Modals\Add;
use Livewire\Component;
use App\Models\Fine;
use App\Models\User;
Use App\Models\Meeting;
use Livewire\Attributes\On;
use App\Models\Userfine as Modeluserfine;
class Userfine extends Component
{
public $fine_id = [];
public $meetingId;
public $userId;
public $fines = [];
public $userFines;
public $addUserFine = false;
#[On('edit-userfine')]
public function addUserFine($id)
{
$this->addUserFine = true;
$userfine = Modeluserfine::where('meeting_id', $id)->first();
if ($userfine) {
$this->meetingId = $userfine->meeting_id;
$this->userId = $userfine->user_id;
$this->fines = Fine::whereDoesntHave('userfines', function ($query) {
$query->where('user_id', $this->userId);
})->get();
$this->userFines = Modeluserfine::with('fine')->where('user_id', $this->userId)->get();
}
}
public function save()
{
if (!empty($this->fine_id)) {
// Save selected fines to the user_fines table
foreach ($this->fine_id as $fineId) {
// Retrieve the amount from the fine table
$fine = Fine::find($fineId);
$fineAmount = $fine->amount;
Modeluserfine::create([
'user_id' => $this->userId,
'fine_id' => $fineId,
'fine_amount' => $fineAmount, // Set the amount
]);
}
}
$this->dispatch('toastrSuccess', message: ' User Fined successfully');
return redirect()->to('/meeting/start');
}
// public function render()
// {
// $fines = Fine::all();
// return view('livewire.modals.edit.userfine', compact('fines'));
// }
public function render()
{
$fines = Fine::all();
return view('livewire.modals.add.userfine', compact('fines'));
}
}
please any suggestions will go a long way
public $addUserFine = false;
public function addUserFine($id)
{
$this->addUserFine = true;
don't have functions and public properties with the same name
Modals are a block within a page that are revealed when the conditions are right. They are not complete pages.
@Snapey, i just rename my public properties now and it is still not showing
public $fine_id = [];
public $meetingId;
public $userId;
public $fines = [];
public $userFines;
public $isUserFineVisible = false;
#[On('edit-userfine')]
public function addUserFine($id)
{
$this->isUserFineVisible = true;
to understand how to make this work, you really need a better understanding of plain html and modals.
I see you have added the hidden class to the div, but where do you remove this when the component isUserFineVisible property is true?
Perhaps pick up some ideas here https://codecourse.com/watch/global-modals-with-livewire?part=global-modals-with-livewire
i was able to solve the error by adding this line of code in my addUserFine method
$this->dispatch('openModal', id: 'addUserFine');
thank you for your response
Please or to participate in this conversation.