Lorsque vous cliquez pour ouvrir le modal, le modal s'affiche correctement et le bouton de fermeture montre que ma souris survole eux, mais lorsque vous cliquez dessus, rien ne se passe et le modal reste ouvert. Quelqu'un a-t-il déjà rencontré/résolu ce problème ? Tout ce que je vois ici, c'est ajouter "data-bs-dismiss" mais cela n'a aucun effet sur le schéma. Je suis nouveau sur bootstrap, donc toute aide serait grandement appréciée ! Le code est le suivant, lien vers le code complet -
<!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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous avez quelques questions.
Commençons par comment créer le bouton poke orange.
function addListItem(pokemon) { let listItem = $('Cela semble correct... mais :
let button = $('');Vérifiez-le
data target="#modal-container. Il manque un trait d'union, à la place ceciCela devrait ressembler à ceci :
Ensuite, vous n'avez pas besoin d'inclure cette ligne dans votre fonction
showDetailsModal(pokemon):modalContainer.classList.add('show');data-target和data-togglevous présentera cette partie.Enfin, votre CSS semble placer l'arrière-plan du modal au-dessus du modal. Changez ceci :
#modal-container { ... z-index: 999; ... }Remplacezpar quelque chose d'autre (par exemple, 1051, ou vous pouvez le supprimer et laisser Bootstrap le gérer pour vous), puisque l'arrière-plan
z-indexest 1040.