I have some legacy code which I am trying to update from bootstrap 3.4.1 to 5.3.3. Upon upgrading, a modal in my application no longer appears and there's an error in the console. On investigating, it seems that some legacy code is trying to manually hide the Bootstrap $backdrop
property:
var bsModalBackdrop = $(bsModal).data('bs.modal').$backdrop;
if (bsModalBackdrop) {
bsModalBackdrop.addClass('hidden');
}
The error is that $(bsModal).data('bs.modal')
comes up as undefined
, whereas with Bootstrap 3.4.1 it contains an object like this:
{bs.modal: s}
bs.modal: s
$backdrop: S.fn.init
0: div.modal-backdrop.fade.in
length: 1
prevObject: S.fn.init {0: div.modal-backdrop.fade.in, length: 1}
[[Prototype]]: Object
$body: S.fn.init {0: body.il-body.modal-open, length: 1}
$dialog: S.fn.init {length: 0, prevObject: S.fn.init}
$element: S.fn.init {0: div.il-modal.modal.fade.il-modal-sm.from-right, length: 1}
bodyIsOverflowing: false
fixedContent: ".navbar-fixed-top, .navbar-fixed-bottom"
ignoreBackdropClick: false
isShown: true
options: {backdrop: true, keyboard: true, show: true}
originalBodyPad: ""
scrollbarWidth: 0
[[Prototype]]: Object
[[Prototype]]: Object
Has this functionality been removed, or replaced somewhere else? I've tried deleting the above code, but then the backdrop stays in place and I just don't get the error message. It seems my code does expect Bootstrap to have placed the bs.modal
property on the element and needs to remove it.