當(dāng)單擊開(kāi)啟模式時(shí)，模式顯示得很好，並且關(guān)閉按鈕表明我的滑鼠懸停在它們上方，但是單擊時(shí)什麼也沒(méi)有發(fā)生，並且模式保持打開(kāi)狀態(tài)。 有人以前遇到/解決過(guò)這個(gè)問(wèn)題嗎？我在這裡看到的只是添加“data-bs-dismiss”，但這並沒(méi)有對(duì)模式產(chǎn)生影響。我是引導(dǎo)程式的新手，所以任何和所有的幫助將不勝感激！程式碼如下，連結(jié)到完整程式碼 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name= "viewport" content ="width=device-width, initial-scale=1">
<title>Pokedex</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="./CSS/styles.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/scripts.js" defer></script>
</head>
<body>
<div class="pokedex">
<h1 class="pokemon-header">Pokedex</h1>
<ul class="pokemon-list list-group"></ul></div>
<div class="modal" id="modal-container" tabindex="-1" role="dialog" aria-labelledby="modal-container" aria-modal="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title"></h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/promise-polyfill.js"></script>
<script src="js/fetch-polyfill.js"></script>
</body>
</html> 
1
0
0
有幾個(gè)問(wèn)題。
讓我們從創(chuàng)建橙色戳按鈕的方式開(kāi)始。
function addListItem(pokemon) {
let listItem = $('
這似乎沒(méi)問(wèn)題...但是：
let button = $('');
看看 data target="#modal-container 。缺少一個(gè)連字符，而不是這個(gè)
data target="#modal-container"
它應(yīng)該看起來(lái)像這樣：
data-target="#modal-container"
接下來(lái)，您的 showDetailsModal(pokemon) 函數(shù)中不需要包含此行：
modalContainer.classList.add('show');
data-target 和 data-toggle 將為您介紹該部分。
最後，您的 CSS 似乎將模態(tài)的背景放在模態(tài)的頂部。更改此：
#modal-container {
...
z-index: 999;
...
}
更改為其他內(nèi)容（例如，1051，或者您可以將其刪除，然後讓 Bootstrap 為您處理），因?yàn)楸尘暗?z-index 為 1040。
