在执行函数时关闭Bootstrap Modal（使用Javascript而不是JQuery）

Question

我想在执行某个函数时关闭引导模式，但当再次打开模式时，我必须双击才能打开它，我想用一键再次打开，而不是双击，谢谢

关闭引导模式（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';

Answer 1

我相信我们都知道这很可能是一个解决办法。有时这会使工作更容易完成。因此有一个显示/隐藏引导4模式的解决方法。

没有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);
}

我希望这不会阻止您将其转换为普通的JavaSript逻辑。