Certainly! In Filament (a popular Laravel admin panel package), if you want to open a custom component in a popup/modal when clicking a button inside another modal, you can use Filament's built-in modal actions or Livewire events to trigger the display of your custom component.
Here's a step-by-step solution:
1. Create Your Custom Component
Suppose you have a Livewire component called ShowCustomComponent.
// app/Http/Livewire/ShowCustomComponent.php
namespace App\Http\Livewire;
use Livewire\Component;
class ShowCustomComponent extends Component
{
public function render()
{
return view('livewire.show-custom-component');
}
}
2. Register the Component in Filament
If you are using Filament's resource pages or forms, you can add a custom action to open a modal with your component.
use Filament\Forms\Components\Actions\Action;
Action::make('openCustomComponent')
->label('Open Custom Component')
->action(fn ($livewire) => $livewire->dispatchBrowserEvent('open-custom-component-modal'))
->modal(
fn () => view('livewire.show-custom-component')
),
3. Using Livewire Events for Popup
Alternatively, you can use Livewire events and Alpine.js to control the modal popup.
In your Blade view:
<!-- Button to trigger the modal -->
<button wire:click="$emit('openCustomComponent')">Open Custom Component</button>
<!-- Modal -->
<div x-data="{ open: false }"
x-on:open-custom-component.window="open = true"
x-show="open"
style="display: none;">
@livewire('show-custom-component')
<button @click="open = false">Close</button>
</div>
In your main Livewire component:
public function mount()
{
$this->listeners = [
'openCustomComponent' => 'showCustomComponentModal',
];
}
public function showCustomComponentModal()
{
$this->dispatchBrowserEvent('open-custom-component');
}
4. Using Filament's Modal Actions (Recommended)
If you are inside a Filament form or table, you can use the ->modal() method on actions to show a custom view or Livewire component.
Action::make('showCustomComponent')
->label('Show Custom Component')
->modalHeading('Custom Component')
->modalContent(fn () => view('livewire.show-custom-component'))
->modalSubmitAction(false)
->modalCancelActionLabel('Close'),
Summary:
- Create your custom Livewire component.
- Use Filament's modal actions or Livewire events to trigger the modal.
- Render your custom component inside the modal.
If you need a more specific example based on your exact Filament setup (form, table, resource, etc.), please provide more details!