diff --git a/docs/components/modal.md b/docs/components/modal.md index deb25c4dc42401c5caad786fed5c103e12f1637c..96a11e1a2d9957443a311d23413ebb63e8660a4a 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -410,7 +410,7 @@ For modals that simply appear rather than fade in to view, remove the `.fade` cl ### Dynamic heights -If the height of a modal changes while it is open, you should call `$('#myModal').data('bs.modal').handleUpdate()` to readjust the modal's position in case a scrollbar appears. +If the height of a modal changes while it is open, you should call `$('#myModal').data('bs.modal').handleUpdate()` or `$('#myModal').modal('handleUpdate')` to readjust the modal's position in case a scrollbar appears. ### Accessibility @@ -575,6 +575,12 @@ Manually hides a modal. **Returns to the caller before the modal has actually be {% highlight js %}$('#myModal').modal('hide'){% endhighlight %} +#### `.modal('handleUpdate')` + +Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). + +{% highlight js %}$('#myModal').modal('handleUpdate'){% endhighlight %} + ### Events Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`). diff --git a/js/src/modal.js b/js/src/modal.js index 9263efd536f3309ef5f6afb57215bcdfcaecf4a6..7f010b8e09b2a7a9648a0f5ce508f109272764a0 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -215,6 +215,9 @@ const Modal = (($) => { this._scrollbarWidth = null } + handleUpdate() { + this._adjustDialog() + } // private @@ -296,7 +299,7 @@ const Modal = (($) => { _setResizeEvent() { if (this._isShown) { - $(window).on(Event.RESIZE, (event) => this._handleUpdate(event)) + $(window).on(Event.RESIZE, (event) => this.handleUpdate(event)) } else { $(window).off(Event.RESIZE) } @@ -401,10 +404,6 @@ const Modal = (($) => { // todo (fat): these should probably be refactored out of modal.js // ---------------------------------------------------------------------- - _handleUpdate() { - this._adjustDialog() - } - _adjustDialog() { const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight