Download the PHP package ssh521/laravel-draggable-modal without Composer
On this page you can find all versions of the php package ssh521/laravel-draggable-modal. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
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 laravel-draggable-modal
Laravel Draggable Modal
A Laravel package that provides draggable and resizable modal components with Alpine.js support.
Features
- π±οΈ Draggable Modals: Click and drag modals to reposition them
- π Resizable: Resize modals with drag handles
- π― Multiple Modal Support: Open multiple modals simultaneously with z-index management
- π¨ Alert Modals: Pre-styled alert modals with success, warning, error, and info variants
- π Dark Mode Support: Built-in dark mode styling
- β‘ Alpine.js Integration: Seamless integration with Alpine.js
- πͺ Modal Triggers: Simple component to trigger modals
- π± Responsive: Works on desktop and mobile devices
Requirements
- PHP 8.2 or higher
- Laravel 11.0 or 12.0
- Alpine.js 3.x
- Tailwind CSS
Installation
μ€μΉμ μ€μ μ μ 체 λ¨κ³λ INSTALL.mdλ₯Ό μ°Έκ³ νμΈμ. READMEμμλ μ¬μ©λ²λ§ λ€λ£Ήλλ€.
Usage
Basic Draggable Modal
Multi-Modal Support
Alert Modal
Modal Trigger Variants
Component Props
Draggable Modal / Draggable Modal Multi
| Prop | Type | Default | Description |
|---|---|---|---|
id |
string | auto-generated | Unique identifier for the modal |
title |
string | '' | Modal title displayed in header |
width |
int | 800 | Initial width in pixels |
height |
int | 600 | Initial height in pixels |
minWidth |
int | 300 | Minimum width in pixels |
minHeight |
int | 200 | Minimum height in pixels |
initialX |
int|null | null | Initial X position (centered if null) |
initialY |
int|null | null | Initial Y position (centered if null) |
showCloseButton |
bool | true | Show close button in header |
showResizeHandle |
bool | true | Show resize handle in corner |
closeOnEscape |
bool | true | Close modal on ESC key |
closeOnBackdropClick |
bool | false | Close modal when clicking backdrop |
Draggable Modal Alert
| Prop | Type | Default | Description |
|---|---|---|---|
id |
string | auto-generated | Unique identifier for the modal |
title |
string | 'Alert' | Alert title |
message |
string | '' | Alert message |
type |
string | 'info' | Alert type: info, success, warning, error |
showCloseButton |
bool | true | Show close button |
closeOnBackdropClick |
bool | false | Close on backdrop click |
closeOnEscape |
bool | true | Close on ESC key |
Modal Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
text |
string | 'Open Modal' | Button/link text |
modal-id |
string | required | ID of the modal to open |
variant |
string | 'primary' | Style variant: primary, secondary, danger |
type |
string | 'button' | Render as: button, link |
modalType |
string | 'multi' | Modal type: multi, single, alert |
Programmatic Control
You can also trigger modals programmatically using custom events:
You can also open a modal by dispatching a DOM event from Blade or JS. The package registers listeners in
resources/js/draggable-modal/init.js.
Livewire Integration
You can trigger modals from Livewire components:
Customization
Customizing Views
After publishing the views, you can customize them in:
Customizing JavaScript
After publishing the JavaScript files, you can modify the behavior in:
If you change file locations or names, update your imports accordingly and rebuild assets (npm run build).
Routes: μν λΌμ°νΈ λΉνμ±ν λ° web.phpμ μ§μ μΆκ°
μν λΌμ°νΈ μλ λ‘λλ₯Ό λκ³ μ νλ€λ©΄ μ€μ μ νΌλΈλ¦¬μν λ€ λΉνμ±νν μ μμ΅λλ€.
1) μ€μ νΌλΈλ¦¬μ
2) .env λλ config/draggable-modal.phpμμ λΉνμ±ν
λλ config/draggable-modal.phpμμ
3) routes/web.phpμ μ§μ μΆκ° μμ
Troubleshooting
μ€μΉ/λΉλ κ΄λ ¨ λ¬Έμ λ INSTALL.mdμ Troubleshooting μ μ νμΈνμΈμ. μ¬μ© μ€ λμ λ¬Έμ κ° μλ€λ©΄ λΈλΌμ°μ μ½μ μ€λ₯μ Alpine μ΄κΈ°ν μ¬λΆλ₯Ό μ°μ νμΈν΄ μ£ΌμΈμ.
Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
License
This package is open-sourced software licensed under the MIT license.
Credits
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
All versions of laravel-draggable-modal with dependencies
illuminate/support Version ^11.0|^12.0
illuminate/view Version ^11.0|^12.0