Download the PHP package noerd/modal without Composer
On this page you can find all versions of the php package noerd/modal. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Package modal
Short Description Open each livewire component in a modal window.
License MIT
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package modal
noerd/modal
A stacked modal system for Laravel Livewire 4.
Open any Livewire component in a modal — no traits, no modifications to your livewire component code.
Modals can also be stacked — open another modal from inside an open one with the same $modal() call.
Installation
That is all — nothing needs to be published. The bundled JavaScript is served by the package itself
through the route /noerd-modal/{file} (like Livewire serves livewire.js), so public/ stays
untouched and the package works from vendor/ as well as from a path repository.
Add source path to your resources/css/app.css file
Configuration
The config is merged automatically. Publish it only when you want to change the default panel
position (center or right):
Add Assets between your head tags.
Add Modal Component to your layout. Make sure x-data is set on the body tag or any parent element of the modal component, otherwise the modal won't work.
Example Usage
Opening a Livewire component in a modal via a button
If you want to add parameters to your component which is opened in a modal:
Stacked Modals
$modal(...) works the same way from inside an already-open modal — there is no extra API and no nesting limit. Calling it pushes a new modal onto the stack on top of the current one.
Closing follows LIFO order:
- ESC closes only the topmost modal.
- Dispatch
closeTopModalfrom PHP/Livewire to close the top modal programmatically. - Dispatch
closeAllModalsto clear the entire stack at once.
Layering is handled automatically: only the top modal is interactive; modals beneath it are dimmed and slightly scaled down — no styling work required on your end.
Developing the package
Run npm run dev inside the package directory: it writes the Vite hot file to
public/vendor/noerd-modal/hot of the host application (the vite config assumes the package lives
in app-modules/noerd-modal), and <x-noerd::noerd-modal-assets/> then loads the bundle from the
dev server instead of the package route. npm run build writes the bundle to dist/build, which is
committed and shipped with the package.
Publishing the Example
To publish the example components and a demo route, run:
This will:
- Copy example components to
resources/views/components/example/ - Add a route
/noerd-example-modaltoroutes/web.php
Example Livewire Starter Kit
If you are using the Livewire Starter Kit you can edit the sidebar.blade.php like this example to make noerd modal working
