rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Backport #29886

Browse Source 
Close modal with keyboard=true & backdrop=static
This commit is contained in:
Giovanni Mendoza 2020-01-10 11:06:12 +02:00 committed by XhmikosR
parent 0f0a8c364d
commit 6daae47cc0
3 changed files with 58 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
js/src/modal.js
View File

@ -325,9 +325,12 @@ class Modal {
}
_setEscapeEvent() {
if (this._isShown && this._config.keyboard) {
if (this._isShown) {
$(this._element).on(Event.KEYDOWN_DISMISS, (event) => {
if (event.which === ESCAPE_KEYCODE) {
if (this._config.keyboard && event.which === ESCAPE_KEYCODE) {
event.preventDefault()
this.hide()
} else if (!this._config.keyboard && event.which === ESCAPE_KEYCODE) {
this._triggerBackdropTransition()
}
})

49
js/tests/unit/modal.js
View File

@ -855,4 +855,53 @@ $(function () {
backdrop: 'static'
})
})
QUnit.test('should close modal when escape key is pressed with keyboard = true and backdrop is static', function (assert) {
assert.expect(1)
var done = assert.async()
var $modal = $('<div class="modal" data-backdrop="static" data-keyboard="true"><div class="modal-dialog" /></div>').appendTo('#qunit-fixture')
$modal.on('shown.bs.modal', function () {
$modal.trigger($.Event('keydown', {
which: 27
}))
setTimeout(function () {
var modal = $modal.data('bs.modal')
assert.strictEqual(modal._isShown, false)
done()
}, 10)
})
.bootstrapModal({
backdrop: 'static',
keyboard: true
})
})
QUnit.test('should not close modal when escape key is pressed with keyboard = false and backdrop = static', function (assert) {
assert.expect(1)
var done = assert.async()
var $modal = $('<div class="modal" data-backdrop="static" data-keyboard="false"><div class="modal-dialog" /></div>').appendTo('#qunit-fixture')
$modal.on('shown.bs.modal', function () {
$modal.trigger($.Event('keydown', {
which: 27
}))
setTimeout(function () {
var modal = $modal.data('bs.modal')
assert.strictEqual(modal._isShown, true)
done()
}, 10)
})
.on('hidden.bs.modal', function () {
assert.strictEqual(false, true, 'should not hide the modal')
})
.bootstrapModal({
backdrop: 'static',
keyboard: false
})
})
})

8
site/docs/4.4/components/modal.md
View File

@ -139,7 +139,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
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 id="staticBackdropLive" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
@ -172,7 +172,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
@ -802,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 or on escape key press.</td>
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
</tr>
<tr>
<td>keyboard</td>
@ -897,7 +897,7 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
</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 an escape key press is performed.</td>
<td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside the modal or an escape key press is performed with the keyboard option or <code>data-keyboard</code> set to <code>false</code>.</td>
</tr>
</tbody>
</table>