{"id":15295858,"url":"https://github.com/shaack/bootstrap-show-modal","last_synced_at":"2025-04-05T18:06:46.022Z","repository":{"id":32794251,"uuid":"142797625","full_name":"shaack/bootstrap-show-modal","owner":"shaack","description":"A Bootstrap plugin, to create modals dynamically in JavaScript","archived":false,"fork":false,"pushed_at":"2025-03-10T22:46:46.000Z","size":114,"stargazers_count":55,"open_issues_count":3,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T17:11:50.512Z","etag":null,"topics":["bootstrap","bootstrap4","dialog","jquery","jquery-plugin","modal","ui"],"latest_commit_sha":null,"homepage":"","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/shaack.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-29T21:45:23.000Z","updated_at":"2025-03-21T10:11:45.000Z","dependencies_parsed_at":"2024-02-22T14:53:33.506Z","dependency_job_id":null,"html_url":"https://github.com/shaack/bootstrap-show-modal","commit_stats":{"total_commits":137,"total_committers":3,"mean_commits":"45.666666666666664","dds":0.03649635036496346,"last_synced_commit":"5811de5a5ef3ceebe6d94ece947386994f5d4e3c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-show-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-show-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-show-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-show-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shaack","download_url":"https://codeload.github.com/shaack/bootstrap-show-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378141,"owners_count":20929296,"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","bootstrap4","dialog","jquery","jquery-plugin","modal","ui"],"created_at":"2024-09-30T18:08:26.495Z","updated_at":"2025-04-05T18:06:45.998Z","avatar_url":"https://github.com/shaack.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bootstrap-show-modal\n\nbootstrap plugin to create bootstrap modals in pure JavaScript.\n\n\u003e This version is compatible with **Bootstrap 5**, but we remain a Bootstrap 4 compatible version with the branch\n\u003e \u003ca href=\"https://github.com/shaack/bootstrap-show-modal/tree/bootstrap4-compatible\"\u003ebootstrap4-compatible\u003c/a\u003e.\n\u003e npm package versions 3.x are Bootstrap 5 compatible, versions 1.x Bootstrap 4 compatible.\n\n\u003e **With version 5.x of bootstrap-shop-modal we completely removed jQuery 🥳 🚀**\n\n## References\n\n- [Demo page with usage examples](https://shaack.com/projekte/bootstrap-show-modal)\n- [GitHub repository](https://github.com/shaack/bootstrap-show-modal)\n- [npm package](https://www.npmjs.com/package/bootstrap-show-modal)\n\n## Installation\n\n```bash\nnpm install bootstrap-show-modal\n```\n\nOr just download this repository and include `src/ShowModal.js`.\n\n## Usage\n\n### Simple Modal\n```javascript\nbootstrap.showModal({title: \"Hello World!\", body: \"A very simple modal dialog without buttons.\"})\n```\n\n### Alert Dialog\n```javascript\nbootstrap.showAlert({title: \"Hi\", body: \"Please press ok, if you like or dislike cookies.\"})\n```\n\n### Confirm Dialog\n```javascript\nbootstrap.showConfirm({\n    title: \"Please confirm\", body: \"Do you like cats?\", textTrue: \"Yes\", textFalse: \"No\",\n    onSubmit: function (result) { // callback on confirm\n        if (result) {\n            bootstrap.showAlert({title: \"Result: \" + result, body: \"You like cats.\"})\n        } else {\n            bootstrap.showAlert({title: \"Result: \" + result, body: \"You don't like cats.\"})\n        }\n    },\n    onDispose: function() {\n        console.log(\"The confirm dialog vanished\")\n    }\n})\n```\n\n## Properties\n\n```javascript\nthis.props = {\n    title: \"\", // the dialog title html\n    body: \"\", // the dialog body html\n    footer: \"\", // the dialog footer html (mainly used for buttons)\n    modalClass: \"fade\", // Additional css for \".modal\", \"fade\" for fade effect\n    modalDialogClass: \"\", // Additional css for \".modal-dialog\", like \"modal-lg\" or \"modal-sm\" for sizing\n    options: { // The Bootstrap modal options as described here: https://getbootstrap.com/docs/4.0/components/modal/#options\n        backdrop: 'static' // disallow closing on click in the background\n    },\n    draggable: false, // make the dialog draggable 🆕\n    // Events:\n    onCreate: null, // Callback, called after the modal was created\n    onShown: null, // Callback, called after the modal was shown and completely faded in\n    onDispose: null, // Callback, called after the modal was disposed\n    onSubmit: null // Callback of bootstrap.showConfirm(), called after yes or no was pressed\n}\n```\n\nSee the [Bootstrap Modal documentation](https://getbootstrap.com/docs/5.3/components/modal/) for possible\nvalues of `options`, `modalClass` and `modalDialogClass`.\n\n## Minified version\n\nI don't provide a minified version because I think it should be up to the using programmer \nto create minified versions, with all the used script sources concatenated to one file.\n\nBut, if you want it, it is easy to create your minified version with uglify: https://www.npmjs.com/package/uglify-js\n\nJust install uglify\n```bash\nnpm install uglify-js -g\n```\nand then in the src-folder\n```bash\nuglifyjs ShowModal.js --compress --mangle \u003e ShowModal.min.js\n```\n\n## Browser support\n\nIt works in all modern browsers and in the Internet Explorer. Not tested with IE \u003c 11.\n \n---\n\nFind more high quality modules from [shaack.com](https://shaack.com)\non [our projects page](https://shaack.com/works).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaack%2Fbootstrap-show-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshaack%2Fbootstrap-show-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaack%2Fbootstrap-show-modal/lists"}