It is widely acknowledged that using workarounds is often necessary. These workarounds can make tasks easier to accomplish, such as the workaround for showing/hiding Bootstrap 4 modals.
For those looking to achieve this without jQuery (but in TypeScript), the following logic can be used:
showModal(){
let modal = document.getElementById('downloadModal') as HTMLElement;
let modalDismiss = modal.querySelector('[data-dismiss]') as HTMLButtonElement;
let backdrop = document.createElement('div') as HTMLElement;
modal.setAttribute('aria-modal', 'true');
modal.style.paddingRight = '16px';
modal.style.display = 'block';
modal.removeAttribute('aria-hidden');
document.body.style.paddingRight = '16px';
document.body.classList.add('modal-open');
backdrop.classList.add('modal-backdrop', 'fade');
document.body.appendChild(backdrop);
backdrop.addEventListener('click', this.hideModal.bind(this));
modalDismiss.addEventListener('click', this.hideModal.bind(this));
setTimeout(function(){
modal.classList.add('show');
backdrop.classList.add('show');
}, 200);
}
hideModal(){
let modal = document.getElementById('downloadModal') as HTMLElement;
let modalDismiss = modal.querySelector('[data-dismiss]') as HTMLButtonElement;
let backdrop = document.querySelector('.modal-backdrop');
modal.classList.remove('show');
backdrop.removeEventListener('click', this.hideModal.bind(this));
modalDismiss.removeEventListener('click', this.hideModal.bind(this));
setTimeout(function(){
modal.style.display = 'none';
modal.removeAttribute('aria-modal');
modal.removeAttribute('style');
modal.setAttribute('aria-hidden', 'true');
document.body.removeAttribute('style');
document.body.classList.remove('modal-open');
backdrop.remove();
}, 200);
}
Feel free to translate this into vanilla JavaScript logic without any hindrances.