我有一个简单的Bootstrap文档是这样的：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/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/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>如您所见，我已经确定了js脚本和css文件，它在Bootstrap中正确显示了列表，但在单击Launch demo modal时，Modal没有显示。
也没有js错误出现在控制台栏！
那么，这里出了什么问题？我该如何解决这个问题？
1条答案
按热度按时间qlzsbp2j1#
你需要使用
在接近的时候你需要
https://getbootstrap.com/docs/5.0/components/modal/