diff options
| author | Shohei Yoshida <fellows3@gmail.com> | 2019-01-21 00:28:16 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2019-01-21 00:28:16 +0300 |
| commit | de0bb1e0522d14bcdef70746da277992f992f83c (patch) | |
| tree | b48397d9cd7f0e1f695a9b7beb56abf728e65bf8 /js | |
| parent | 41f85b64bf6dd7aae13c1b9e5ca6ed310bfa1bbf (diff) | |
Scrollable modal (#27769)
Diffstat (limited to 'js')
| -rw-r--r-- | js/src/modal.js | 9 | ||||
| -rw-r--r-- | js/tests/unit/modal.js | 27 |
2 files changed, 35 insertions, 1 deletions
diff --git a/js/src/modal.js b/js/src/modal.js index 125182e136..f658201306 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -51,6 +51,7 @@ const Event = { } const ClassName = { + SCROLLABLE : 'modal-dialog-scrollable', SCROLLBAR_MEASURER : 'modal-scrollbar-measure', BACKDROP : 'modal-backdrop', OPEN : 'modal-open', @@ -60,6 +61,7 @@ const ClassName = { const Selector = { DIALOG : '.modal-dialog', + MODAL_BODY : '.modal-body', DATA_TOGGLE : '[data-toggle="modal"]', DATA_DISMISS : '[data-dismiss="modal"]', FIXED_CONTENT : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top', @@ -244,7 +246,12 @@ class Modal { this._element.style.display = 'block' this._element.removeAttribute('aria-hidden') this._element.setAttribute('aria-modal', true) - this._element.scrollTop = 0 + + if ($(this._dialog).hasClass(ClassName.SCROLLABLE)) { + this._dialog.querySelector(Selector.MODAL_BODY).scrollTop = 0 + } else { + this._element.scrollTop = 0 + } if (transition) { Util.reflow(this._element) diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js index 4d7682aaa7..1762904803 100644 --- a/js/tests/unit/modal.js +++ b/js/tests/unit/modal.js @@ -790,4 +790,31 @@ $(function () { }) .bootstrapModal('show') }) + + QUnit.test('should scroll to top of the modal body if the modal has .modal-dialog-scrollable class', function (assert) { + assert.expect(2) + var done = assert.async() + + var $modal = $([ + '<div id="modal-test">', + ' <div class="modal-dialog modal-dialog-scrollable">', + ' <div class="modal-content">', + ' <div class="modal-body" style="height: 100px; overflow-y: auto;">', + ' <div style="height: 200px" />', + ' </div>', + ' </div>', + ' </div>', + '</div>' + ].join('')).appendTo('#qunit-fixture') + + var $modalBody = $('.modal-body') + $modalBody.scrollTop(100) + assert.strictEqual($modalBody.scrollTop(), 100) + + $modal.on('shown.bs.modal', function () { + assert.strictEqual($modalBody.scrollTop(), 0, 'modal body scrollTop should be 0 when opened') + done() + }) + .bootstrapModal('show') + }) }) |