執行 function 時關閉引導模式（使用 Javascript 而不是 Jquery）

Question

我想在執行 function 時關閉引導模式，但是當再次打開模式時，我必須雙擊打開它我想再次單擊而不是雙擊打開它，謝謝

我的代碼關閉引導模式（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

我相信我們都知道這很可能是一種解決方法。 有時這會使工作更容易完成。 因此，一種顯示/隱藏 Bootstrap 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 邏輯。