').appendTo('#qunit-fixture')
+
+ $modal.on('shown.bs.modal', function () {
+ $modal.trigger('click')
+ setTimeout(function () {
+ var modal = $modal.data('bs.modal')
+
+ assert.strictEqual(modal._isShown, true)
+ done()
+ }, 10)
+ })
+ .on('hidden.bs.modal', function () {
+ assert.strictEqual(true, false, 'should not hide the modal')
+ })
+ .bootstrapModal({
+ backdrop: 'static'
+ })
+ })
})
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 9a036883a07a..9053c173f8c3 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -48,6 +48,11 @@
.modal.show & {
transform: $modal-show-transform;
}
+
+ // When trying to close, animate focus to scale
+ .modal.modal-static & {
+ transform: $modal-scale-transform;
+ }
}
.modal-dialog-scrollable {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index cc4e0ad5e49f..28db6f994337 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -976,6 +976,7 @@ $modal-sm: 300px !default;
$modal-fade-transform: translate(0, -50px) !default;
$modal-show-transform: none !default;
$modal-transition: transform .3s ease-out !default;
+$modal-scale-transform: scale(1.02) !default;
// Alerts
diff --git a/site/docs/4.3/components/modal.md b/site/docs/4.3/components/modal.md
index b2a7fc6a3933..f74253df093f 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
{% 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.
+
+
+
+
+
+
Modal title
+
+
+
+
I will not close if you click outside me. Don't even try to press escape key.
+
+
+
+
+
+
+
+
+
+
+{% highlight html %}
+
+
+
+
+
+
+
+
+
Modal title
+
+
+
+ ...
+
+
+
+
+
+{% 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
backdrop
boolean or the string 'static'
true
-
Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
+
Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click or on escape key press.
keyboard
@@ -836,6 +895,10 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
hidden.bs.modal
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
+
+
hidePrevented.bs.modal
+
This event is fired when the modal is shown, its backdrop is static and a click outside the modal or a scape key press is performed.