Bootstrap modal won't close when clicking "x" or "close" buttons
Question
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/bootstrap@4.3.1/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/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/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>
2 answers
solution1
0 2022-12-29 20:12:37
There are a couple of issues.
Let's start with the way the orange poke-buttons are created.
function addListItem(pokemon) {
let listItem = $('<li class="list-group-item"></li>');
let button = $('<button class="pokemon-button btn btn-warning" 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 class="pokemon-button btn btn-warning" 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.
solution2
0 2022-12-29 20:12:39
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.
solution3
-1 2022-12-29 18:09:00
To get the modal to close when you click the close button, you can use the .modal method from Bootstrap. Here's an example of how you can use it:
$(document).ready(function() {
// When the close button is clicked
$('.close').click(function() {
// Hide the modal
$('#modal-container').modal('hide');
});
});
This will bind a click event to the close button, and when the button is clicked, the modal will be hidden.
You may also need to make sure that you have the latest version of Bootstrap and jQuery included in your project. You can do this by including the following scripts in your HTML:
<!-- Latest jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Latest Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
I hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.