{"id":17035726,"url":"https://github.com/leantony/laravel_modal","last_synced_at":"2025-10-31T16:02:01.998Z","repository":{"id":62516664,"uuid":"73262768","full_name":"leantony/laravel_modal","owner":"leantony","description":"An ajax based modal utility for laravel","archived":false,"fork":false,"pushed_at":"2017-04-06T18:30:02.000Z","size":20,"stargazers_count":1,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T13:13:55.938Z","etag":null,"topics":["laravel-modal","modal-forms"],"latest_commit_sha":null,"homepage":"https://packagist.org/packages/leantony/laravel_modal","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leantony.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-09T07:57:33.000Z","updated_at":"2020-05-28T05:55:22.000Z","dependencies_parsed_at":"2022-11-02T13:45:21.486Z","dependency_job_id":null,"html_url":"https://github.com/leantony/laravel_modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leantony%2Flaravel_modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leantony%2Flaravel_modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leantony%2Flaravel_modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leantony%2Flaravel_modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leantony","download_url":"https://codeload.github.com/leantony/laravel_modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248571847,"owners_count":21126522,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["laravel-modal","modal-forms"],"created_at":"2024-10-14T08:47:54.377Z","updated_at":"2025-10-31T16:02:01.908Z","avatar_url":"https://github.com/leantony.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Laravel modal\nPurpose of this package, is to allow quick and easy creation and triggering of modal forms via ajax.\n\n## Installation\n### Requirements\n+ laravel. At least version 5.1+\n+ composer\n+ jquery\n+ Bootstrap3.\n\nUse composer to install the package.\n```bash\ncomposer require leantony/laravel_modal:dev-master\n```\n\nAdd the service provider, in app.php.\n```php\nLeantony\\Modal\\ServiceProvider::class\n```\nPublish the assets\n```bash\n# publish the javascript assets\nphp artisan vendor:publish --tag=public --provider=\"Leantony\\Modal\\ServiceProvider\" --force\n# publish the view\nphp artisan vendor:publish --provider=\"Leantony\\Modal\\ServiceProvider\"\n```\n\u003e The javascript files will be copied into the \"public/vendor/leantony/modal\" folder\n\nThe view will be copied to resources/views/vendor/leantony/modal\n\nYou can then reference the assets (bootstrap, jquery) on your page\n\n# Usage\nA sample modal form....The bootform package used here, isnt really a necessity, so feel free to change this. Only used it because it allows for quick form markup generation in laravel.\n\n\u003e But be sure to leave the *form id* of *modal_form* as is, since its referenced in javascript.\n\n```php\n{!! BootForm::openHorizontal(['sm' =\u003e [4, 8], 'lg' =\u003e [2, 10]])-\u003eaction($route)-\u003eclass('form-horizontal')-\u003eid('modal_form')-\u003emethod(isset($method) ? $method : 'POST') !!}\n\n\u003cdiv class=\"modal-header\"\u003e\n    \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\"\u003e\u0026times;\u003c/button\u003e\n    \u003ch4 class=\"modal-title\"\u003e{{ ucwords($action . ' '. class_basename($model)) }}\u003c/h4\u003e\n\u003c/div\u003e\n\u003cdiv class=\"modal-body\"\u003e\n    \u003cdiv id=\"modal-notification\"\u003e\u003c/div\u003e\n    {!! BootForm::text('Title', 'title')-\u003eplaceholder('Enter a title') !!}\n    {!! BootForm::textArea('Content', 'content')-\u003eplaceholder('Enter some content') !!}\n\u003c/div\u003e\n\u003cdiv class=\"modal-footer\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\"\u003eClose\u003c/button\u003e\n    \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eSave Changes\u003c/button\u003e\n\u003c/div\u003e\n{!! BootForm::close() !!}\n```\n\nA sample page...\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\"\u003e\n        \u003ctitle\u003eDocument\u003c/title\u003e\n        \u003clink rel=\"stylesheet\" media=\"screen\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\"\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n\n     \u003cp\u003e\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi architecto deleniti eius odio odit quas quisquam quod repellendus sapiente. Autem deserunt fugiat ipsum iusto molestias odio provident repudiandae voluptates!\n    \u003c/p\u003e\n    \u003chr\u003e\n    \u003c!-- a link to a named route, that displays the modal form --\u003e\n    \u003ca href=\"{{ route('posts.create') }}\" class=\"btn btn-default show_modal_form\"\u003eNew post\u003c/a\u003e\n\n\n\n    \u003cscript src=\"https://code.jquery.com/jquery.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"{{ asset('vendor/leantony/modal/modal.min.js') }}\"\u003e\u003c/script\u003e\n    \u003c!-- initialize the modal js plugin --\u003e\n    \u003cscript\u003e\n        leantony.modal({});\n    \u003c/script\u003e\n\n    \u003c!-- Add the modal container to your layout. This is where the html for the modal form will be injected by the javascript ajax call. Put it ideally just before the footer --\u003e\n\n    @include('modal::container')\n    \u003cfooter\u003e\n        some text here\n    \u003c/footer\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```php\n\n```\nYou'll need to make a copy of the sample modal form provided, to your views, and edit as necessary. This will obviously be different depending on your needs.\n\nIn this case, the modal will be triggered on create action. For this example, It is assumed that named your modal form 'create.blade.php'\n```php\n    /**\n     * Display the view to create the resource\n     *\n     * @return Response\n     */\n    public function create()\n    {\n        // use render so that only the html for the view is returned as opposed to the layout within which it is in\n        return view('posts.create', [\n            'route' =\u003e route('posts.store'),\n            'model' =\u003e Post::class,\n            'action' =\u003e 'create'\n        ])-\u003erender();\n    }\n```\n\u003e check the variables in the form sample, to know what else can be passed into the modal view. Fee free to add your own\n\nAdd a link to your page, that will trigger the modal. Give the link a class of 'show_modal_form'\n\n\u003e The class name is important as it instructs the javascript to send an ajax request to the link's href attribute for a view. Which will then be displayed on the page, as a modal.\n\nWhen you click on the button, the modal should be displayed.\n\nYour store action should return json. For example;\n```php\n    /**\n     * Store a newly created resource in storage.\n     *\n     * @param Request $request\n     * @return Response\n     */\n    public function store(Request $request)\n    {\n        // quick validation. You can a form request for this\n        $this-\u003evalidate($request, ['title' =\u003e 'required', 'content' =\u003e 'required|between:5,1000']);\n\n        // save the data\n        $post = Post::create($request-\u003eall());\n\n        // return json response. The message is, as it will be used to notify the user of their action\n        return new JsonResponse([\n            'success' =\u003e true,\n            'message' =\u003e 'record created',\n        ], 200);\n    }\n```\nFor validation, you can use a form request. Don't worry about the validation errors, as they will be displayed automatically on the modal form.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleantony%2Flaravel_modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleantony%2Flaravel_modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleantony%2Flaravel_modal/lists"}