Bootstrap modal won't close when clicking "x" or "close" buttons-CodePudding

The modal shows up just fine when clicking it to open, and the close buttons register that my mouse is hovering over them, but when clicked nothing happens and the modal remains open. Has anyone encountered/fixed this problem before? All I've seen on here is to add "data-bs-dismiss" but that hasn't made a difference in the modal. I'm new to bootstrap so any and all help would be much appreciated! Code is below, link to full code here -

<!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 >
      <h1 >Pokedex</h1>
      <ul ></ul></div>
      
      <div  id="modal-container" tabindex="-1" role="dialog" aria-labelledby="modal-container" aria-modal="true">
        <div  role="document">
          <div >
            <div >
              <h2 ></h2>
              <button type="button"  data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>


            <div >
            </div>
            <div >
              <button type="button"  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>

CodePudding user response：

There are a couple of issues.

Let's start with the way the orange poke-buttons are created.

function addListItem(pokemon) {
    let listItem = $('<li ></li>');
    let button = $('<button  data target="#modal-container" data-toggle="modal">'   pokemon.name   '</button>');
    listItem.append(button);
    pokemonListElement.append(listItem);
    button.on('click', function(){
      showDetails(pokemon);
    });
  }

This seems to be fine... But:

let button = $('<button  data target="#modal-container" data-toggle="modal">'   pokemon.name   '</button>');

Take a look at data target="#modal-container . There's a hyphen missing, and instead of this

data target="#modal-container"

it should look like this:

data-target="#modal-container"

Next, there's no need to have this line in your showDetailsModal(pokemon) function:

modalContainer.classList.add('show');

The data-target and data-toggle will cover that part for you.

Finally, your CSS seems to be putting the modal's backdrop on top of the modal. Change this:

#modal-container {
    ...
    z-index: 999;
    ...
}

to something else (for example, 1051, or you can delete it, and let Bootstrap handle it for you), since the backdrop has a z-index of 1040.

CodePudding user response：

I was able to fix the behavior in the JSFiddle by replacing the following two lines in the showDetailsModal function:

let modalContainer = document.querySelector('#modal-container');
modalContainer.classList.add('is-visible');

with this line:

$('#modal-container').modal('show');

that is one of the methods provided in Bootstrap 4.3 per: the Bootstrap Modal documentation

Also, it's necessary to add the data-backdrop="false" attribute to your modal-container div in order to maintain the current style/behavior.

This may not be the best solution - I am not sure why your code doesn't work, it seems reasonable to me, but I think it's a good idea to use the default methods provided by the library as other methods (like the close function) may be expecting them and fail to work if you're using an improvised method.