Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | Bootstrap Modal v2.2.5 |
| 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 | |||
| 30 | **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. |
||
| 31 | |||
| 32 | |||
| 33 | Overview |
||
| 34 | ----------- |
||
| 35 | |||
| 36 | + Backwards compatible |
||
| 37 | + Responsive |
||
| 38 | + Stackable |
||
| 39 | + Full width |
||
| 40 | + Load content via AJAX |
||
| 41 | + Disable background scrolling |
||
| 42 | |||
| 43 | Installation |
||
| 44 | ----------- |
||
| 45 | + Include `css/bootstrap-modal.css` after the main bootstrap css files. |
||
| 46 | + Include `js/bootstrap-modalmanager.js` and `js/bootstrap-modal.js` after the main bootstrap js files. |
||
| 47 | |||
| 48 | <link href="css/bootstrap.css" rel="stylesheet" /> |
||
| 49 | <link href="css/bootstrap-responsive.css" rel="stylesheet" /> |
||
| 50 | <link href="css/bootstrap-modal.css" rel="stylesheet" /> |
||
| 51 | |||
| 52 | <script src="js/bootstrap.js"></script> |
||
| 53 | <script src="js/bootstrap-modalmanager.js"></script> |
||
| 54 | <script src="js/bootstrap-modal.js"></script> |
||
| 55 | |||
| 56 | Options |
||
| 57 | ----------- |
||
| 58 | |||
| 59 | In addition to the standard bootstrap options, you now have access to the following options |
||
| 60 | |||
| 61 | **Modal** |
||
| 62 | |||
| 63 | + **width** |
||
| 64 | Set the inital width of the modal. |
||
| 65 | |||
| 66 | + **height** |
||
| 67 | Set the inital height of the modal. |
||
| 68 | |||
| 69 | + **maxHeight** |
||
| 70 | Set the max-height of the modal-body. |
||
| 71 | |||
| 72 | + **loading** |
||
| 73 | Toggle the loading state. |
||
| 74 | |||
| 75 | + **spinner** |
||
| 76 | Provide a custom image or animation for the loading spinner. |
||
| 77 | |||
| 78 | + **backdropTemplate** |
||
| 79 | Provide a custom modal backdrop. |
||
| 80 | |||
| 81 | + **consumeTab** |
||
| 82 | Used to enable tabindexing for modals with `data-tabindex`. This is set to true by default. |
||
| 83 | |||
| 84 | + **focusOn** |
||
| 85 | The element or selector to set the focus to once the modal is shown. |
||
| 86 | |||
| 87 | + **replace** |
||
| 88 | If set to true, the modal will replace the topmost modal when opened. |
||
| 89 | |||
| 90 | + **attentionAnimation** |
||
| 91 | 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. |
||
| 92 | |||
| 93 | + **modalOverflow** |
||
| 94 | 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. |
||
| 95 | |||
| 96 | + **manager** |
||
| 97 | Set the modal's manager. By default this is set to the `GlobalModalManager` and will most likely not need to be overridden. |
||
| 98 | |||
| 99 | **ModalManager** |
||
| 100 | |||
| 101 | + **loading** |
||
| 102 | Toggle the loading state. |
||
| 103 | |||
| 104 | + **backdropLimit** |
||
| 105 | Limit the amount of backdrops that will appear on the page at the same time. |
||
| 106 | |||
| 107 | + **spinner** |
||
| 108 | Provide a custom image or animation for the loading spinner. |
||
| 109 | |||
| 110 | + **backdropTemplate** |
||
| 111 | Provide a custom modalmanager backdrop. This backdrop is used when `$element.modalmanager('loading')` is called. |
||
| 112 | |||
| 113 | Disable Background Scrolling |
||
| 114 | ----------- |
||
| 115 | |||
| 116 | 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: |
||
| 117 | |||
| 118 | <body> |
||
| 119 | <div class="page-container"> |
||
| 120 | <div class="navbar navbar-fixed-top">...</div> |
||
| 121 | <div class="container">...</div> |
||
| 122 | </div> |
||
| 123 | </body> |
||
| 124 | |||
| 125 | 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. |
||
| 126 | |||
| 127 | Constrain Modal to Window Size |
||
| 128 | ----------- |
||
| 129 | |||
| 130 | You can bind the the height of the modal body to the window with something like this: |
||
| 131 | |||
| 132 | $.fn.modal.defaults.maxHeight = function(){ |
||
| 133 | // subtract the height of the modal header and footer |
||
| 134 | return $(window).height() - 165; |
||
| 135 | } |
||
| 136 | |||
| 137 | **Note:** This will be overwritten by the responsiveness and is only set when the modal is displayed, not when the window is resized. |
||
| 138 | |||
| 139 | Tab Index for Modal Forms |
||
| 140 | ----------- |
||
| 141 | You can use `data-tabindex` instead of the default `tabindex` to specify the tabindex within a modal. |
||
| 142 | |||
| 143 | <input type="text" data-tabindex="1" /> |
||
| 144 | <input type="text" data-tabindex="2" /> |
||
| 145 | |||
| 146 | See the stackable example on the [demo](http://jschr.github.com/bootstrap-modal/) page for an example. |
||
| 147 | |||
| 148 | |||
| 149 | |||
| 150 | |||
| 151 | |||
| 152 | |||
| 153 | |||
| 154 | |||
| 155 | [](https://bitdeli.com/free "Bitdeli Badge") |
||
| 156 |