無法使用Java在Div上調用Bootstrap模態函數

Question

我正在嘗試使用Symfony構建CMS，在其中我試圖使用Vanilla JS而不是jQuery。 我正在顯示一個模態頁面上的一些信息。

如果我這樣做$("#companies").modal(); 引導模態正確顯示。

直到現在，我還認為let companies = $("#companies"); 並let companies = document.getElementById('companies'); 是等效的。 但是，當我嘗試在Javascript getElementById返回的元素上調用模式函數時，它給我帶來了錯誤modal() is not a function 。

如何使用getElementById函數返回的元素調用Bootstrap模態函數？ 謝謝。

Answer 1

沒有jquery，您將無法使用引導程序。 所有的js組件都有jquery依賴。 要在沒有jquery的情況下使用bootstrap，您需要bootstrap克隆（如bootstrap.native）

Answer 2

這是您可以手動完成Vanilla😋😋方法的一種方法

function toggleModal() {
    const yourModal = document.getElementById('companies');
    document.querySelector('body').classList.toggle('modal-open');
    if (yourModal.style.display == 'block') {
        yourModal.style.display = 'none';
        yourModal.classList.remove('in'); 
        document.querySelector('.modal-backdrop').remove(); //remove shadow
        document.querySelectorAll('#companies [data-dismiss="modal"]').forEach((elem, index) => elem.removeEventListener('click', toggleModal)); //remove listeners

    } else {
        yourModal.style.display = 'block';
        yourModal.classList.add('in');
        //backdrop effect
        const shadow = document.createElement('div');
        shadow.classList.add('modal-backdrop');
        shadow.classList.add('fade');
        shadow.classList.add('in');
        document.querySelector('.container').appendChild(shadow);
        //add event listeners for dismissing dialog
        document.querySelectorAll('#companies [data-dismiss="modal"]').forEach((elem, index) => elem.addEventListener('click', toggleModal)
        );
    }
}