點選'x”或'關閉”按鈕時，Bootstrap模態框無法關閉

Question

當單擊打開模式時，模式顯示得很好，並且關閉按鈕表明我的滑鼠懸停在它們上方，但是單擊時什麼也沒有發生，並且模式保持打開狀態。有人以前遇到/解決過這個問題嗎？我在這裡看到的只是添加“data-bs-dismiss”，但這並沒有對模式產生影響。我是引導程式的新手，所以任何和所有的幫助將不勝感激！程式碼如下，連結到完整程式碼-

P粉968008175 · Answer

有幾個問題。

讓我們從創建橙色戳按鈕的方式開始。

function addListItem(pokemon) {
    let listItem = $('

'); let button = $(''); listItem.append(button); pokemonListElement.append(listItem); button.on('click', function(){ showDetails(pokemon); }); }

這似乎沒問題...但是：

let button = $('');

看看 data target="#modal-container 。缺少一個連字符，而不是這個

data target="#modal-container"

它應該看起來像這樣：

data-target="#modal-container"

接下來，您的 showDetailsModal(pokemon) 函數中不需要包含此行：

modalContainer.classList.add('show');

data-target 和 data-toggle 將為您介紹該部分。

最後，您的 CSS 似乎將模態的背景放在模態的頂部。更改此：

#modal-container {
    ...
    z-index: 999;
    ...
}

更改為其他內容（例如，1051，或者您可以將其刪除，然後讓 Bootstrap 為您處理），因為背景的 z-index 為 1040。