I have a Bootstrap simple document goes like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-QYIZto+st3yW+o8+5OHfT6S482Zsvz2WfOzpFSXMF9zqeLcFV0/wlZpMtyFcZALm" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<br>
<div class="container">
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Ajax To Do List <a href="" class="pull-right"><i class="fa fa-plus" aria-hidden="true"></i></a></h3>
</div>
<br>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">Crasasd asdas asdas</li>
<li class="list-group-item">Crasasd asdas asdas</li>
<li class="list-group-item">Crasasd asdas asdas</li>
<li class="list-group-item">Crasasd asdas asdas</li>
</ul>
</div>
</div>
<br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="col-lg-3">
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<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>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>
As you can see I have determined the js scripts and css files and it show the list properly in Bootstrap but the Modal does not show up when clicking on Launch demo modal.
Also no js error appears in Console bar!
So what's going wrong here? How can I fix this issue?
You need to use
data-bs-toggle="modal"
data-bs-target="#exampleModal"
and on close you need
data-bs-dismiss="modal"
on you Launch demo modal Button.