La boîte modale Bootstrap ne peut pas être fermée en cliquant sur le bouton "x" ou "fermer"

Question

Lorsque vous cliquez pour ouvrir le modal, le modal s'affiche correctement et le bouton de fermeture montre que ma souris les survole, 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-

P粉968008175 · Answer

Vous avez quelques questions.

Commençons par comment créer le bouton poke orange.

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

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

Cela semble correct... mais :

let button = $('');

Vérifiez-le data target="#modal-container. Il manque un trait d'union, à la place ceci

data target="#modal-container"

Cela devrait ressembler à ceci :

data-target="#modal-container"

Ensuite, vous n'avez pas besoin d'inclure cette ligne dans votre fonction showDetailsModal(pokemon) :

modalContainer.classList.add('show');

data-target 和 data-toggle vous 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;
    ...
}

Remplacez

par 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-index est 1040.