recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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">&times;</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>

P粉809110129P粉809110129240 Il y a quelques jours440

répondre à tous(1)je répondrai

  • P粉968008175

    P粉9680081752024-03-30 23:04:31

    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.

    répondre
    0
  • Annulerrépondre