| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | Bootstrap Modal v2.2.0 |
| A | 2 | ============= |
| 3 | ||
| 4 | See live demo [here](http://jschr.github.com/bootstrap-modal/). | |
| 5 | ||
| 6 | Extends 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. | |
| 7 | ||
| 8 | A single ModalManager is created by default on body and can be accessed through the jQuery plugin interface. | |
| 9 | ||
| 10 | $('body').modalmanager('loading'); | |
| 11 | ||
| 12 | Bootstrap-Modal can be used as a replacement for Bootstrap's Modal class or as a patch to the library. | |
| 13 | ||
| 14 | ||
| 15 | Bootstrap 3 | |
| 16 | ----------- | |
| 17 | ||
| 18 | If 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. | |
| 19 | ||
| 20 | If you're using the loading spinner functionality you may also need to change the default template to be compatible in js: | |
| 21 | ||
| 22 | $.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner = | |
| 23 | '<div class="loading-spinner" style="width: 200px; margin-left: -100px;">' + | |
| 24 | '<div class="progress progress-striped active">' + | |
| 25 | '<div class="progress-bar" style="width: 100%;"></div>' + | |
| 26 | '</div>' + | |
| 27 | '</div>'; | |
| 28 | ||
| 29 | Overview | |
| 30 | ----------- | |
| 31 | ||
| 32 | + Backwards compatible | |
| 33 | + Responsive | |
| 34 | + Stackable | |
| 35 | + Full width | |
| 36 | + Load content via AJAX | |
| 37 | + Disable background scrolling | |
| 38 | ||
| 39 | Installation | |
| 40 | ----------- | |
| 41 | + Include `css/bootstrap-modal.css` after the main bootstrap css files. | |
| 42 | + Include `js/bootstrap-modalmanager.js` and `js/bootstrap-modal.js` after the main bootstrap js files. | |
| 43 | ||
| 44 | <link href="css/bootstrap.css" rel="stylesheet" /> | |
| 45 | <link href="css/bootstrap-responsive.css" rel="stylesheet" /> | |
| 46 | <link href="css/bootstrap-modal.css" rel="stylesheet" /> | |
| 47 | ||
| 48 | <script src="js/bootstrap.js"></script> | |
| 49 | <script src="js/bootstrap-modalmanager.js"></script> | |
| 50 | <script src="js/bootstrap-modal.js"></script> | |
| 51 | ||
| 52 | Options | |
| 53 | ----------- | |
| 54 | ||
| 55 | In addition to the standard bootstrap options, you now have access to the following options | |
| 56 | ||
| 57 | **Modal** | |
| 58 | ||
| 59 | + **width** | |
| 60 | Set the inital width of the modal. | |
| 61 | ||
| 62 | + **height** | |
| 63 | Set the inital height of the modal. | |
| 64 | ||
| 65 | + **maxHeight** | |
| 66 | Set the max-height of the modal-body. | |
| 67 | ||
| 68 | + **loading** | |
| 69 | Toggle the loading state. | |
| 70 | ||
| 71 | + **spinner** | |
| 72 | Provide a custom image or animation for the loading spinner. | |
| 73 | ||
| 74 | + **backdropTemplate** | |
| 75 | Provide a custom modal backdrop. | |
| 76 | ||
| 77 | + **consumeTab** | |
| 78 | Used to enable tabindexing for modals with `data-tabindex`. This is set to true by default. | |
| 79 | ||
| 80 | + **focusOn** | |
| 81 | The element or selector to set the focus to once the modal is shown. | |
| 82 | ||
| 83 | + **replace** | |
| 84 | If set to true, the modal will replace the topmost modal when opened. | |
| 85 | ||
| 86 | + **attentionAnimation** | |
| 87 | Set 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. | |
| 88 | ||
| 89 | + **modalOverflow** | |
| 90 | Set 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. | |
| 91 | ||
| 92 | + **manager** | |
| 93 | Set the modal's manager. By default this is set to the `GlobalModalManager` and will most likely not need to be overridden. | |
| 94 | ||
| 95 | **ModalManager** | |
| 96 | ||
| 97 | + **loading** | |
| 98 | Toggle the loading state. | |
| 99 | ||
| 100 | + **backdropLimit** | |
| 101 | Limit the amount of backdrops that will appear on the page at the same time. | |
| 102 | ||
| 103 | + **spinner** | |
| 104 | Provide a custom image or animation for the loading spinner. | |
| 105 | ||
| 106 | + **backdropTemplate** | |
| 107 | Provide a custom modalmanager backdrop. This backdrop is used when `$element.modalmanager('loading')` is called. | |
| 108 | ||
| 109 | Disable Background Scrolling | |
| 110 | ----------- | |
| 111 | ||
| 112 | If 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 `<div class="page-container">`. For example: | |
| 113 | ||
| 114 | <body> | |
| 115 | <div class="page-container"> | |
| 116 | <div class="navbar navbar-fixed-top">...</div> | |
| 117 | <div class="container">...</div> | |
| 118 | </div> | |
| 119 | </body> | |
| 120 | ||
| 121 | The 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. | |
| 122 | ||
| 123 | Constrain Modal to Window Size | |
| 124 | ----------- | |
| 125 | ||
| 126 | You can bind the the height of the modal body to the window with something like this: | |
| 127 | ||
| 128 | $.fn.modal.defaults.maxHeight = function(){ | |
| 129 | // subtract the height of the modal header and footer | |
| 130 | return $(window).height() - 165; | |
| 131 | } | |
| 132 | ||
| 133 | **Note:** This will be overwritten by the responsiveness and is only set when the modal is displayed, not when the window is resized. | |
| 134 | ||
| 135 | Tab Index for Modal Forms | |
| 136 | ----------- | |
| 137 | You can use `data-tabindex` instead of the default `tabindex` to specify the tabindex within a modal. | |
| 138 | ||
| 139 | <input type="text" data-tabindex="1" /> | |
| 140 | <input type="text" data-tabindex="2" /> | |
| 141 | ||
| 142 | See the stackable example on the [demo](http://jschr.github.com/bootstrap-modal/) page for an example. | |
| 143 | ||
| 144 | ||
| 145 | ||
| 146 | ||
| 147 | ||
| 148 | ||
