{"id":16416661,"url":"https://github.com/javatmp/bootstrap-modal-wrapper","last_synced_at":"2025-03-21T03:32:19.925Z","repository":{"id":29837748,"uuid":"122501400","full_name":"JavaTMP/bootstrap-modal-wrapper","owner":"JavaTMP","description":"Bootstrap modal factory that supports dynamic modal creations and nested stacked modal features.","archived":false,"fork":false,"pushed_at":"2022-12-01T23:16:11.000Z","size":544,"stargazers_count":19,"open_issues_count":12,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-12T07:09:47.454Z","etag":null,"topics":["bootstrap","bootstrap-dialog","bootstrap-modal","dialog","modal"],"latest_commit_sha":null,"homepage":"http://java.javatmp.com/#/pages/static/plugins/bootstrap-modal-wrapper","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JavaTMP.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-22T16:03:21.000Z","updated_at":"2022-08-26T03:27:17.000Z","dependencies_parsed_at":"2023-01-14T15:45:01.238Z","dependency_job_id":null,"html_url":"https://github.com/JavaTMP/bootstrap-modal-wrapper","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/JavaTMP%2Fbootstrap-modal-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JavaTMP%2Fbootstrap-modal-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JavaTMP%2Fbootstrap-modal-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JavaTMP%2Fbootstrap-modal-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JavaTMP","download_url":"https://codeload.github.com/JavaTMP/bootstrap-modal-wrapper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221811374,"owners_count":16884305,"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":["bootstrap","bootstrap-dialog","bootstrap-modal","dialog","modal"],"created_at":"2024-10-11T07:09:47.888Z","updated_at":"2024-10-28T09:16:07.196Z","avatar_url":"https://github.com/JavaTMP.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bootstrap Modal Wrapper\nBootstrap modal wrapper factory for creating dynamic and nested stacked dialog instances.\n\n[![](https://data.jsdelivr.com/v1/package/npm/bootstrap-modal-wrapper/badge)](https://www.jsdelivr.com/package/npm/bootstrap-modal-wrapper)\n\n## Installation Using NPM\n```\nnpm install bootstrap-modal-wrapper\n```\n\n## Building from The source\nMake sure node.js and git client are locally installed on your machine and then run the following commands:\n```\ncd bootstrap-modal-wrapper\nnpm install\ngulp\n```\n## Demo And Examples\nOnline demo of all below examples can be found in the following JavaTMP demo pages:\n- [Bootstrap Modal Online Demo](http://java.javatmp.com/#/pages/static/plugins/bootstrap-modal-wrapper).\n\n### BOOTSTRAP MESSAGE MODAL\nThe simplest scenario of modal wrapper is to show a simple message when use press a button:\n```html\n\u003cbutton id=\"simple-message\" type=\"button\" class=\"btn btn-primary\"\u003e\n    Basic Message\n\u003c/button\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    jQuery(function ($) {\n        $(\"#simple-message\").on(\"click\", function (event) {\n            BootstrapModalWrapperFactory.showMessage(\"Delfault Message to show to user\");\n        });\n    });\n\u003c/script\u003e\n```\n\n### BOOTSTRAP ALERT MODAL\nThe simple scenario of modal wrapper is to show a simple alert when use press a button:\n```html\n\u003cbutton id=\"simple-alert\" type=\"button\" class=\"btn btn-primary\"\u003e\n    Basic Alert\n\u003c/button\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    jQuery(function ($) {\n        $(\"#simple-alert\").on(\"click\", function (event) {\n            BootstrapModalWrapperFactory.alert(\"Delfault alert \u003cb\u003ewith only message Text\u003c/b\u003e\");\n        });\n    });\n\u003c/script\u003e\n```\n\n### BOOTSTRAP CONFIRMATION MODAL\nJavaTMP Bootstrap modal wrapper factory provides a confirmation dialog too with ability to run different code.\nSee the following example:\n```html\n\u003cbutton id=\"simple-confirm\" type=\"button\" class=\"btn btn-primary\"\u003e\n    Basic Confirm\n\u003c/button\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    jQuery(function ($) {\n        $(\"#simple-confirm\").on(\"click\", function (event) {\n            BootstrapModalWrapperFactory.confirm({\n                title: \"Confirm\",\n                message: \"Are You Sure ?\",\n                onConfirmAccept: function () {\n                    BootstrapModalWrapperFactory.alert(\"Thank you for ACCEPTING the previous confiramtion dialog\");\n                },\n                onConfirmCancel: function () {\n                    BootstrapModalWrapperFactory.alert(\"Thank you for CANCELING the previous confiramtion dialog\");\n                }\n            });\n        });\n    });\n\u003c/script\u003e\n```\n### JAVATMP BOOTSTRAP MODAL WRAPPER `CREATEMODAL` METHOD\nThe JavaTMP Bootstrap Modal wrapper object provides a general method `createModal` which creates modals dynamically.\nthe implementation of `BootstrapModalWrapperFactory.alert` and `BootstrapModalWrapperFactory.confirm` methods use `createModal`\nto provide desired behaviors.\nThe following examples show you how to use `createModal` method in action:\n#### Create simple Bootstrap Modal wrapper instance dynamically\n```JS\nvar onlyBody = BootstrapModalWrapperFactory.createModal({\n    message: \"Simple Message body\",\n    closable: false,\n    closeByBackdrop: true\n});\nonlyBody.show();\n```\n#### Create a simple bootstrap modal wrapper with body and title only:\n```JS\nvar modalWrapper = BootstrapModalWrapperFactory.createModal({\n    message: \"Simple Message body\",\n    title: \"Header Title\",\n    closable: true,\n    closeByBackdrop: true\n});\nmodalWrapper.show();\n```\n#### Create a simple bootstrap modal wrapper with a button to close and destroy it\n```JS\nvar modalWrapper = BootstrapModalWrapperFactory.createModal({\n    message: \"Simple Message body\",\n    title: \"Header Title\",\n    closable: false,\n    closeByBackdrop: false,\n    buttons: [\n        {\n            label: \"Close Me\",\n            cssClass: \"btn btn-primary\",\n            action: function (button, buttonData, originalEvent) {\n                return this.hide();\n            }\n        }\n    ]\n});\nmodalWrapper.show();\n```\n#### Create nested bootstrap modal wrapper instances dynamically:\n```JS\nvar modalWrapper = BootstrapModalWrapperFactory.createModal({\n    message: \"Simple Message body\",\n    title: \"Header Title\",\n    closable: false,\n    closeByBackdrop: false,\n    buttons: [\n        {\n            label: \"Close\",\n            cssClass: \"btn btn-secondary\",\n            action: function (button, buttonData, originalEvent) {\n                return this.hide();\n            }\n        },\n        {\n            label: \"Create alert\",\n            cssClass: \"btn btn-primary\",\n            action: function (button, buttonData, originalEvent) {\n                BootstrapModalWrapperFactory.alert(\"Alert Modal Created\");\n            }\n        }\n    ]\n}).show();\n```\n#### Update title and body of bootstrap modal wrapper dynamically after showing:\n```JS\nBootstrapModalWrapperFactory.createModal({\n    message: \"Simple Message body\",\n    title: \"Header Title\",\n    closable: false,\n    closeByBackdrop: false,\n    buttons: [\n        {\n            label: \"Close\",\n            cssClass: \"btn btn-secondary\",\n            action: function (button, buttonData, originalEvent) {\n                return this.hide();\n            }\n        },\n        {\n            label: \"Update Title \u0026 Message\",\n            cssClass: \"btn btn-primary\",\n            action: function (button, buttonData, originalEvent) {\n                this.updateTitle(\"New Title\");\n                this.updateMessage(\"Updated message content\");\n            }\n        }\n    ]\n}).show();\n```\n#### Update the size of shown bootstrap modal dynamically:\n```JS\nBootstrapModalWrapperFactory.createModal({\n    message: \"Simple Message body\",\n    title: \"Header Title\",\n    closable: false,\n    closeByBackdrop: false,\n    buttons: [\n        {\n            label: \"Close\",\n            cssClass: \"btn btn-secondary\",\n            action: function (button, buttonData, originalEvent) {\n                return this.hide();\n            }\n        },\n        {\n            label: \"Make Me Large\",\n            cssClass: \"btn btn-primary\",\n            action: function (button, buttonData, originalEvent) {\n                this.originalModal.find(\".modal-dialog\").css({transition: 'all 0.4s'});\n                this.updateSize(\"modal-lg\");\n            }\n        },\n        {\n            label: \"Make Me Small\",\n            cssClass: \"btn btn-primary\",\n            action: function (button, buttonData, originalEvent) {\n                this.originalModal.find(\".modal-dialog\").css({transition: 'all 0.4s'});\n                this.updateSize(\"modal-sm\");\n            }\n        },\n        {\n            label: \"Make Me Default\",\n            cssClass: \"btn btn-primary\",\n            action: function (button, buttonData, originalEvent) {\n                this.originalModal.find(\".modal-dialog\").css({transition: 'all 0.4s'});\n                this.updateSize(null);\n            }\n        }\n    ]\n}).show();\n```\n#### Create Bootstrap Modal wrapper buttons dynamically and remove them:\n```JS\nvar buttonsCount = 0;\nBootstrapModalWrapperFactory.createModal({\n    message: \"Simple Message body\",\n    title: \"Header Title\",\n    closable: false,\n    closeByBackdrop: false,\n    buttons: [\n        {\n            label: \"Close\",\n            cssClass: \"btn btn-secondary\",\n            action: function (button, buttonData, originalEvent) {\n                return this.hide();\n            }\n        },\n        {\n            label: \"Add Button\",\n            cssClass: \"btn btn-primary\",\n            action: function (button, buttonData, originalEvent) {\n                this.addButton({\n                    id: \"id-\" + (++buttonsCount),\n                    label: \"New \" + buttonsCount,\n                    cssClass: \"btn btn-secondary\",\n                    action: function (button, buttonData, originalEvent) {\n                        BootstrapModalWrapperFactory.showMessage(\"nothing only to show attached event to button id [\" + buttonData.id + \"]\");\n                        return true;\n                    }\n                });\n            }\n        },\n        {\n            label: \"Delete Button\",\n            cssClass: \"btn btn-primary\",\n            action: function (button, buttonData, originalEvent) {\n                this.removeButton(\"id-\" + (buttonsCount--));\n            }\n        }\n    ]\n}).show();\n```\n#### Simulate Updating Bootstrap Modal wrapper instace dynamically with AJAX response content:\n```JS\nvar m = BootstrapModalWrapperFactory.createModal({\n    message: '\u003cdiv class=\"text-center\"\u003e\u003ci class=\"fa fa-refresh fa-spin fa-3x fa-fw text-primary\"\u003e\u003c/i\u003e\u003c/div\u003e',\n    closable: false,\n    closeByBackdrop: false\n});\nm.originalModal.find(\".modal-dialog\").css({transition: 'all 0.5s'});\nm.show();\nsetTimeout(function () {\n    m.updateSize(\"modal-lg\");\n    m.updateTitle(\"Message Received\");\n    m.updateMessage(\"Message Content\");\n    m.addButton({\n        label: \"Close\",\n        cssClass: \"btn btn-secondary\",\n        action: function (button, buttonData, originalEvent) {\n            return this.hide();\n        }\n    });\n}, 3000);\n```\n#### Advanced AJAX Bootstrap Modal Wrapper Contents\nYou can simply adapt and use the bootstrap modal wrapper to provide a dynamic Bootstrap modal with remote AJAX contents\nusing `createAjaxModal` method, For example:\n```JS\nBootstrapModalWrapperFactory.createAjaxModal({\n    message: '\u003cdiv class=\"text-center\"\u003eLoading\u003c/div\u003e',\n    closable: true,\n    title: \"AJAX Content\",\n    closeByBackdrop: false,\n    localData: {},\n    ajax: { // all jquery.ajax parameters are supported.\n        url: \"\",\n        data: {}\n    },\n    ajaxContainerReadyEventName: \"event-name-triggered-once-ajax-content-updated\"\n});\n```\n\nAnd the following are the response HTML code from the above URL:\n```HTML\n\u003cdiv class=\"dynamic-ajax-content\"\u003e\n    \u003cdiv class=\"row\"\u003e\n        \u003cdiv class=\"col-lg-12\"\u003e\n            \u003cp\u003eLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n        jQuery(function ($) {\n            // here we can reference the container bootstrap modal by its id\n            // passed as parameter to request by name \"ajaxModalId\"\n            // or for demo purposese ONLY we can get a reference top modal\n            // in current open managed instances in BootstrapModalWrapperFactory\n            var currentParentModal = BootstrapModalWrapperFactory.globalModals[BootstrapModalWrapperFactory.globalModals.length - 1];\n            $(\"#\" + currentParentModal.options.id).on(currentParentModal.options.ajaxContainerReadyEventName, function (event, modal) {\n                modal.addButton({\n                    label: \"Update closable by backdrop click\",\n                    cssClass: \"btn btn-info\",\n                    action: function (button, buttonData, originalEvent) {\n                        this.updateClosableByBackdrop(true);\n                    }\n                });\n                modal.addButton({\n                    label: \"Show Ajax Parameters\",\n                    cssClass: \"btn btn-info\",\n                    action: function (button, buttonData, originalEvent) {\n                        alert(\"modal.options.url [\" + modal.options.url + \"]\");\n                    }\n                });\n                modal.addButton({\n                    label: \"Show localData Object\",\n                    cssClass: \"btn btn-info\",\n                    action: function (button, buttonData, originalEvent) {\n                        alert(\"You can Use the following data came from initiator sender code : \" + JSON.stringify(modal.options.localData));\n                    }\n                });\n                modal.addButton({\n                    label: \"Run Function from Sender\",\n                    cssClass: \"btn btn-info\",\n                    action: function (button, buttonData, originalEvent) {\n                        modal.options.localData.funRef();\n                    }\n                });\n                modal.addButton({\n                    label: \"Close\",\n                    cssClass: \"btn btn-primary\",\n                    action: function (button, buttonData, originalEvent) {\n                        return this.hide();\n                    }\n                });\n                modal.addButton({\n                    label: \"Show Alert Dialog\",\n                    cssClass: \"btn btn-success\",\n                    action: function (button, buttonData, originalEvent) {\n                        BootstrapModalWrapperFactory.alert(\"Alert Modal Created From within Ajax Content\");\n                    }\n                });\n            });\n        });\n    \u003c/script\u003e\n\u003c/div\u003e\n```\n\n## Copyright and License\nBootstrap-modal-wrapper is copyrighted by [JavaTMP](http://www.javatmp.com) and\nlicensed under [MIT license](https://github.com/JavaTMP/bootstrap-modal-wrapper/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavatmp%2Fbootstrap-modal-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavatmp%2Fbootstrap-modal-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavatmp%2Fbootstrap-modal-wrapper/lists"}