[英]Close Bootstrap Modal (using Javascript Not Jquery) when execute a function
i wanna close bootstrap modal when execute a function i did it but when open modal again i have to double click to open it i wanna open it again with one click not double, Thanks我想在执行 function 时关闭引导模式,但是当再次打开模式时,我必须双击打开它我想再次单击而不是双击打开它,谢谢
my code to close bootstrap modal (js)我的代码关闭引导模式(js)
// To Close Modal
document.getElementById('ItemModel').classList.remove('show');
document.getElementById('ItemModel').style.display = 'none';
document.getElementsByClassName('modal-backdrop')[0].remove();
document.body.classList.remove('modal-open');
document.body.style.padding = '0';
I believe we all know it's most likely a workaround.我相信我们都知道这很可能是一种解决方法。 Sometimes this will get the job done more easy.
有时这会使工作更容易完成。 Hence a workaround to show/hide Bootstrap 4 modals.
因此,一种显示/隐藏 Bootstrap 4 模态的解决方法。
Without jQuery (but in TypeScript) you can use the following logic:如果没有 jQuery(但在 TypeScript 中),您可以使用以下逻辑:
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);
}
I hope this doesn't stop you from converting it to vanilla JavaSript logic.我希望这不会阻止您将其转换为普通的 JavaSript 逻辑。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.