{"id":13434112,"url":"https://github.com/jschr/bootstrap-modal","last_synced_at":"2025-05-13T22:12:14.348Z","repository":{"id":4817820,"uuid":"5971563","full_name":"jschr/bootstrap-modal","owner":"jschr","description":"Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.","archived":false,"fork":false,"pushed_at":"2019-04-07T20:15:00.000Z","size":172,"stargazers_count":4991,"open_issues_count":110,"forks_count":1087,"subscribers_count":248,"default_branch":"master","last_synced_at":"2025-04-30T14:16:01.659Z","etag":null,"topics":["bootstrap","bootstrap-modal","modal","modalmanager"],"latest_commit_sha":null,"homepage":"http://jschr.github.io/bootstrap-modal/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"ClearcodeHQ/pytest-dbfixtures","license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jschr.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":"2012-09-26T20:06:00.000Z","updated_at":"2025-04-27T16:39:19.000Z","dependencies_parsed_at":"2022-08-31T03:01:08.173Z","dependency_job_id":null,"html_url":"https://github.com/jschr/bootstrap-modal","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jschr%2Fbootstrap-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jschr%2Fbootstrap-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jschr%2Fbootstrap-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jschr%2Fbootstrap-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jschr","download_url":"https://codeload.github.com/jschr/bootstrap-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253452192,"owners_count":21910881,"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-modal","modal","modalmanager"],"created_at":"2024-07-31T02:01:46.413Z","updated_at":"2025-05-13T22:12:14.084Z","avatar_url":"https://github.com/jschr.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Modals and Popups","Modals and Popups [🔝](#readme)","UI","模态框和弹出框","Animation"],"sub_categories":["Other","其它","Modals and Popups"],"readme":"**Note**: Since this plugin was created to solve a lot of the issues with BS2, it still uses the BS2 markup syntax. Currently I believe the default BS3 modal addresses some of the bigger issues and is not worth maintaining two versions of this plugin.\n\n\nBootstrap Modal v2.2.6\n=============\n\nSee live demo [here](http://jschr.github.com/bootstrap-modal/).\n\nExtends Bootstrap's native modals to provide additional functionality. Introduces a **ModalManager** class that operates behind the scenes to handle multiple modals by listening on their events. \n\nA single ModalManager is created by default on body and can be accessed through the jQuery plugin interface.\n```javascript\n    $('body').modalmanager('loading');\n```\nBootstrap-Modal can be used as a replacement for Bootstrap's Modal class or as a patch to the library.\n\n\nBootstrap 3\n-----------\n\nIf you're using BS3, I've provided a compatible css patch. Include `bootstrap-modal-bs3patch.css` **before** the main `bootstrap-modal.css` file to use this plugin with Bootstrap 3.\n\nIf you're using the loading spinner functionality you may also need to change the default template to be compatible in js:\n```html\n    $.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner = \n        '\u003cdiv class=\"loading-spinner\" style=\"width: 200px; margin-left: -100px;\"\u003e' +\n            '\u003cdiv class=\"progress progress-striped active\"\u003e' +\n                '\u003cdiv class=\"progress-bar\" style=\"width: 100%;\"\u003e\u003c/div\u003e' +\n            '\u003c/div\u003e' +\n        '\u003c/div\u003e';\n```\n\n\nOverview\n-----------\n\n+ Backwards compatible\n+ Responsive\n+ Stackable\n+ Full width\n+ Load content via AJAX\n+ Disable background scrolling\n\nInstallation \n-----------\n+ Include `css/bootstrap-modal.css` after the main bootstrap css files.\n+ Include `js/bootstrap-modalmanager.js` and `js/bootstrap-modal.js` after the main bootstrap js files.\n```html\n\t\u003clink href=\"css/bootstrap.css\" rel=\"stylesheet\" /\u003e\n\t\u003clink href=\"css/bootstrap-responsive.css\" rel=\"stylesheet\" /\u003e\n \t\u003clink href=\"css/bootstrap-modal.css\" rel=\"stylesheet\" /\u003e\n\n \t\u003cscript src=\"js/bootstrap.js\"\u003e\u003c/script\u003e\n \t\u003cscript src=\"js/bootstrap-modalmanager.js\"\u003e\u003c/script\u003e\n \t\u003cscript src=\"js/bootstrap-modal.js\"\u003e\u003c/script\u003e\n```\nOptions\n-----------\n\nIn addition to the standard bootstrap options, you now have access to the following options\n\n**Modal**\n\n+ **width**\nSet the initial width of the modal.\n\n+ **height**\nSet the initial height of the modal.\n\n+ **maxHeight**\nSet the max-height of the modal-body.\n\n+ **loading**\nToggle the loading state.\n\n+ **spinner**\nProvide a custom image or animation for the loading spinner.\n\n+ **backdropTemplate**\nProvide a custom modal backdrop.\n\n+ **consumeTab**\nUsed to enable tabindexing for modals with `data-tabindex`. This is set to true by default.\n\n+ **focusOn**\nThe element or selector to set the focus to once the modal is shown.\n\n+ **replace**\nIf set to true, the modal will replace the topmost modal when opened.\n\n+ **attentionAnimation**\nSet the animation used by the `attention` method. Any animation in [animate.css](http://daneden.me/animate/) is supported but only the *shake* animation is included by default.\n\n+ **modalOverflow**\nSet this property to true for modals with highly dynamic content. This will force the modal to behave as if it is larger than the viewport.\n\n+ **manager**\nSet the modal's manager. By default this is set to the `GlobalModalManager` and will most likely not need to be overridden.\n\n**ModalManager**\n\n+ **loading**\nToggle the loading state.\n\n+ **backdropLimit**\nLimit the amount of backdrops that will appear on the page at the same time.\n\n+ **spinner**\nProvide a custom image or animation for the loading spinner.\n\n+ **backdropTemplate**\nProvide a custom modalmanager backdrop. This backdrop is used when `$element.modalmanager('loading')` is called.\n\nGetting a reference to the modal manager\n-----------\n\nIf you did not created your own ModalManager, perhaps you'll need a reference to it. That can be easily accomplished using the following snippet:\n\n```javascript\n\tvar modalManager = $(\"body\").data(\"modalmanager\");\n\tvar openModals = modalManager.getOpenModals();\n\tmodalManager.removeLoading();\n```\n\nAfter that, you'll be able to call any methods that modal manager has, such as:\n\n* removeLoading (remove the loading and backdrop window);\n* getOpenModals (to get the modals that are already open);\n* etc;\n\n\nDisable Background Scrolling\n-----------\n\nIf you want to prevent the background page from scrolling (see [demo](http://jschr.github.com/bootstrap-modal/) for example) you must wrap the page contents in a `\u003cdiv class=\"page-container\"\u003e`. For example:\n```html\n\t\u003cbody\u003e\n\t   \u003cdiv class=\"page-container\"\u003e\n\t\t  \u003cdiv class=\"navbar navbar-fixed-top\"\u003e...\u003c/div\u003e\n\t\t  \u003cdiv class=\"container\"\u003e...\u003c/div\u003e\n\t   \u003c/div\u003e\n\t\u003c/body\u003e\n```\n\nThe reason for doing this instead of just simply setting `overflow: hidden` when a modal is open is to avoid having the page shift as a result of the scrollbar appearing/disappearing. This also allows the document to be scrollable when there is a tall modal but only to the height of the modal, not the entire page.\n\nConstrain Modal to Window Size\n-----------\n\t\nYou can bind the height of the modal body to the window with something like this:\n```javascript\n    $.fn.modal.defaults.maxHeight = function(){\n        // subtract the height of the modal header and footer\n        return $(window).height() - 165; \n    }\n```\n\t\n**Note:** This will be overwritten by the responsiveness and is only set when the modal is displayed, not when the window is resized.\n\t\nTab Index for Modal Forms\n-----------\nYou can use `data-tabindex` instead of the default `tabindex` to specify the tabindex within a modal.\n```html\n    \u003cinput type=\"text\" data-tabindex=\"1\" /\u003e\n    \u003cinput type=\"text\" data-tabindex=\"2\" /\u003e\n```\nSee the stackable example on the [demo](http://jschr.github.com/bootstrap-modal/) page for an example.\n\n\n\t\n\n\n\n\n\n[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/jschr/bootstrap-modal/trend.png)](https://bitdeli.com/free \"Bitdeli Badge\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjschr%2Fbootstrap-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjschr%2Fbootstrap-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjschr%2Fbootstrap-modal/lists"}