diff options
author | Johann-S <johann.servoire@gmail.com> | 2019-10-28 17:28:11 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-11-02 11:02:07 +0300 |
commit | dd96b832f787e91db03ebc687a934deea335bed5 (patch) | |
tree | d559dd6c2bee13b13db7efbcea9692d7f1c1ad3f /site | |
parent | 29f585365fe71a74958d56beac98ab4b7e27a6b1 (diff) |
backport #29516: added animation when modal backdrop is static
Diffstat (limited to 'site')
-rw-r--r-- | site/docs/4.3/components/modal.md | 65 |
1 files changed, 64 insertions, 1 deletions
diff --git a/site/docs/4.3/components/modal.md b/site/docs/4.3/components/modal.md index b2a7fc6a39..f74253df09 100644 --- a/site/docs/4.3/components/modal.md +++ b/site/docs/4.3/components/modal.md @@ -135,6 +135,65 @@ Toggle a working modal demo by clicking the button below. It will slide down and </div> {% endhighlight %} +### Static backdrop + +When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it. + +<div id="staticBackdropLive" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <p>I will not close if you click outside me. Don't even try to press escape key.</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Understood</button> + </div> + </div> + </div> +</div> + +<div class="bd-example"> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdropLive"> + Launch static backdrop modal + </button> +</div> + +{% highlight html %} +<!-- Button trigger modal --> +<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop"> + Launch static backdrop modal +</button> + +<!-- Modal --> +<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + ... + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Understood</button> + </div> + </div> + </div> +</div> +{% endhighlight %} + + ### Scrolling long content When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. @@ -743,7 +802,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <td>backdrop</td> <td>boolean or the string <code>'static'</code></td> <td>true</td> - <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td> + <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click or on escape key press.</td> </tr> <tr> <td>keyboard</td> @@ -836,6 +895,10 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit <td>hidden.bs.modal</td> <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td> </tr> + <tr> + <td>hidePrevented.bs.modal</td> + <td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside the modal or a scape key press is performed.</td> + </tr> </tbody> </table> |