When clicking to open the modal, the modal shows up fine and the close button shows my mouse is hovering over them, but when clicked nothing happens and the modal stays open. Has anyone encountered/solved this problem before? All I see here is adding "data-bs-dismiss" but that has no effect on the schema. I'm new to bootstrap so any and all help would be greatly appreciated! The code is as follows, link to the complete code -
<!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] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
There are a few questions.
Let's start with how to create the orange poke button.
function addListItem(pokemon) { let listItem = $('This seems okay...but:
let button = $('');Look
data target="#modal-container. There is a hyphen missing, not thisIt should look like this:
Next, you don't need to include this line in your
showDetailsModal(pokemon)function:modalContainer.classList.add('show');data-targetanddata-togglewill introduce you to this part.Finally, your CSS appears to be placing the modal's background on top of the modal. Change this:
#modal-container { ... z-index: 999; ... }Change to something else (e.g., 1051, or you can remove it and let Bootstrap handle it for you) since the
z-indexof the background is 1040.