PHPackages dragonsoftware/modalizable - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. dragonsoftware/modalizable ActiveLibrary[Utility & Helpers](/categories/utility) dragonsoftware/modalizable ========================== This package would help create modal edit form for both normal tables and datatable with ease using bootstrap 4 styling v1.0.5(2y ago)080MITJavaScript Since Jan 5Pushed 2y ago1 watchersCompare [ Source](https://github.com/spartyboy/modalizable)[ Packagist](https://packagist.org/packages/dragonsoftware/modalizable)[ RSS](/packages/dragonsoftware-modalizable/feed)WikiDiscussions master Synced 6d ago READMEChangelog (5)DependenciesVersions (7)Used By (0) [![Issues](https://camo.githubusercontent.com/8693891955d7a3793a4571afb58eb8f197632b84455341c30a95f4c244cb7fc1/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f737061727479626f792f6d6f64616c697a61626c653f7374796c653d666f722d7468652d6261646765)](https://github.com/spartyboy/modalizable/issues)[![Forks](https://camo.githubusercontent.com/3eb89f5ce2901244f9f05df41227147a9a80f6b73ffff47b403e447a36742688/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f737061727479626f792f6d6f64616c697a61626c653f7374796c653d666f722d7468652d6261646765)](https://github.com/spartyboy/modalizable/network/members)[![Stars](https://camo.githubusercontent.com/85b29cba68436b563c31a6730d1c9378700d98d6361fb025b0d3f1ef79b31062/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f737061727479626f792f6d6f64616c697a61626c653f7374796c653d666f722d7468652d6261646765)](https://github.com/spartyboy/modalizable/stargazers)[![Total Downloads](https://camo.githubusercontent.com/7ab22993db5be59af2318a430b5fa0c3e45846ced4b2b7efa28f532326b02300/68747470733a2f2f706f7365722e707567782e6f72672f647261676f6e736f6674776172652f6d6f64616c697a61626c652f646f776e6c6f616473)](//packagist.org/packages/dragonsoftware/modalizable)[![License](https://camo.githubusercontent.com/902eca1f642b33e1e92c20fcfeed5daf902ac2adea91ea012fd1db40be8d2fa2/68747470733a2f2f706f7365722e707567782e6f72672f647261676f6e736f6674776172652f6d6f64616c697a61626c652f6c6963656e7365)](//packagist.org/packages/dragonsoftware/modalizable) Modalizable is a bootstrap 4 styled popup modal edit plugin that enables you create edit modal popup with ease and could be customized to fit your needs. it currently supports all input types and could as well auto submit the form Requirement =========== [](#requirement) - Bootstrap 4 - Jquery - Laravel Usage ===== [](#usage) require via composer ``` composer require dragonsofware/modalizable ``` publish assets ``` php artisan vendor:publish --tag="dragon_modal" ``` include scripts ``` @include("modalizable::modalscript",["click"=>"","modal"=>"","autoSubmit"=>(bool)]) ``` The click, modal and autoSubmit key in the array of the @include above are optional. But do provide them if you want to give the bootstrap modal a different id, by default, the click is a html 5 class attribute that triggers the modal when the edit button on your front end is clicked. This is set to modalizable by default, this implies that if you have a mark up code for your edit you should have the following class attached to it. The modal denotes the id to be given to the modal by default this is modalizableModal The autoSubmit denotes if when you click on the save button should this library automatically use ajax and also process error handling for you ``` Edit ``` Features! ========= [](#features) To use the library do ensure you do the following - call the modalizableGenerator() as shown in the code sample below, for input type text, number, tel, file,range, datetime, date, email, search, color,textarea, ``` Modalizable::modalizableGenerator() ``` Example: ======== [](#example) ``` {{$name/anything}} ; ``` the above would create this in the modal popup ``` Full Name ``` The first argument passed to the modalizableGenerator() denotes the tye of input to be created. The second argument is an array that contains \[The value to be used for input, This has no effect ,Label to be given to Input group Prepend\] . The third argument is a font awesome icon to be used. The fourth argument is an array that entails attribute key and respective value to be used as html 5 tag attribute and value, each key is the attribute itself and value of the attribute is the value of the associated key. The fifth argument are classes to be applied to the input tag The sixth argument is the id to be given to the input tag Meanwhile, for inputs of type select,multiselect, checkbox,radio, switch follows same pattern, But has slight modification to be made for the second parameter passed to the modalizable generator method you just have to pass an array of values that should be used as value, label for each element. e.g ``` [ ["id"=>1,"name"=>"Alaska","created_at"=>'2012-02-03'], ["id"=>2,"name"=>"Newyork", "created_at"=>'2012-02-03'] ] the above similar type of array should be used as the second argument passed to the method of the modalizableGenerator. ``` Then you also pass a label to be used for selectLabel argument(6th) of the modalizableGenerator method. for select option this label is used as the optgroup, for radios, checkboxes and switch it is used as a caption for what the entire radio or checkbox is meant for. The next argument(7th) are the selected values that shows the item to be selected or checked this should be passed as an array. for select a single value is needed for checkboxes multiple or single are required e.g. for the above values array previously defined ``` [1] for select means Alaska is selected [1,2] for checkbox or radio or multiSelect means Newyork and Alaska are checked ``` The next argument(8th) is the keys which is to be defined to know what key is to be used from the values argument array for label, value, and which is to be used to determine what is selected or checked e.g. ``` ['label'=>'name','value'=>'id','selected'=>'id'] ``` The next argument(9th) is the custom attribute, this is to be used if you want an array to be passed as a custom attribute of selext,radio, checkbox, switch tag each index of the value key is used for attribute e.g. ``` ['name'=>'my',values=>[ array of values each index corresponds to input of the value argument]] to access this a custom attribute of data-my is created with value of index of the currently iterated value argument ``` The last argument is parent class which defines what class to be appended at main div housing the entire input tag To initialize this do make sure your button to be clicked for edit has the following ``` $text = "Name: {$collection->get('name')},"; $option= json_encode(["id"=>$collection->get('id'),"caption"=>"Edit Programme For $text","url"=>route('crudprogramme.update',['crudprogramme'=>$collection->get('id')]),"csrf"=>csrf_token(),"class"=>"silentSubmit","placeholder"=>"editErrorMessages","errors"=>"clearEditInvalidity","type"=>"edit"]); ``` - The above could be interpreted as seen below. The id denotes a unique identifier of the currently edited form, The caption denotes the caption to be used as modal heading, The url denotes the where the form is to be submitted, The class denotes what should be used to trigger autoSubmit when the save button on the modal is clicked, The placeholder denotes the name it should give to the id of the tag where the errors should be shown, The errors denotes the class to be used to clear field found to have validation errors this is automatically handled if autosubmit is enabled The type denotes what was used to prefix id's in markup on modalizable Controller e.g. edit-name \#More Examples checkbox usage ``` $nestedArray['attributes'] = "" . $name . ""; ``` select Option Usage ``` $nestedArray['admin_category_id']= "".optional($collection->get('admin_category'))['name'].""; ``` \#Performing Complex formating to perform complex task do listen for bootstrap modal open event ``` jQuery('#modalizableModal').on('shown.bs.modal', function () { jQuery('#edit-name').trigger('focus') }) if the id was changed do put the respective name of the modal passed to the modal key at the @include ``` Upcoming features ================= [](#upcoming-features) - File Preview - Much more from your suggestions ### Health Score 26 — LowBetter than 43% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity10 Limited adoption so far Community7 Small or concentrated contributor base Maturity57 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~181 days Recently: every ~216 days Total 6 Last Release 1048d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/26467959?v=4)[spartyboy](/maintainers/spartyboy)[@spartyboy](https://github.com/spartyboy) --- Top Contributors [![spartyboy](https://avatars.githubusercontent.com/u/26467959?v=4)](https://github.com/spartyboy "spartyboy (22 commits)") ### Embed Badge ![Health badge](/badges/dragonsoftware-modalizable/health.svg) ``` [![Health](https://phpackages.com/badges/dragonsoftware-modalizable/health.svg)](https://phpackages.com/packages/dragonsoftware-modalizable) ``` ### Alternatives [dzava/lighthouse Interface for the Google Lighthouse project 4010.4k](/packages/dzava-lighthouse) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)