Apabila mengklik untuk membuka modal, modal muncul dengan baik dan butang tutup menunjukkan tetikus saya melayang di atasnya, tetapi apabila diklik tiada apa yang berlaku dan modal tetap terbuka. Adakah sesiapa pernah menghadapi/menyelesaikan masalah ini sebelum ini? Apa yang saya lihat di sini ialah menambah "data-bs-dismiss" tetapi itu tidak mempunyai kesan pada skema. Saya baru dalam bootstrap jadi sebarang dan semua bantuan akan sangat dihargai! Kod adalah seperti berikut, pautan ke kod penuh -
<!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> 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ada beberapa soalan.
Mari kita mulakan dengan cara mencipta butang cucuk oren.
function addListItem(pokemon) { let listItem = $('Ini nampak ok...tetapi:
let button = $('');Lihatlah
data target="#modal-container. Terdapat tanda sempang yang hilang, sebaliknya iniIa sepatutnya kelihatan seperti ini:
Seterusnya, anda tidak perlu memasukkan baris ini dalam fungsi
showDetailsModal(pokemon)anda:modalContainer.classList.add('show');data-target和data-toggleakan memperkenalkan anda kepada bahagian ini.Akhir sekali, CSS anda nampaknya meletakkan latar belakang modal di atas modal. Tukar ini:
#modal-container { ... z-index: 999; ... }Tukarkepada sesuatu yang lain (cth., 1051, atau anda boleh mengalih keluarnya dan biarkan Bootstrap mengendalikannya untuk anda), kerana latar belakang
z-indexialah 1040.