html - 按下按钮时不弹出 Boostrap 模态
问题描述
我试图弹出一个模式,但是当我按下按钮时没有任何反应。这是迄今为止的HTML代码-
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">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">
<p>
Well, hello there!
</p>
</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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
当我打开页面时,左上角会出现一个按钮。按下它后,它会突出显示,但什么也没有发生。您知道为什么会发生这种情况,以及如何解决吗?
解决方案
You have used bootstrap 4 code instead of bootstrap 5 code, either make all your modals the way bootstrap 5 does it, and you can read it here: https://getbootstrap.com/docs/5.0/components/modal/
or just change bootstrap versions to bootstrap 4
The difference is mostly that in bootstrap 5 you use "data-bs" + something in your attributes instead of just "data-"
推荐阅读
- oauth-2.0 - 在访问令牌中包含其他声明
- ios - iOS AVVideoCompositionCoreAnimationTool:如何使用 videoCompositionCoreAnimationToolWithAdditionalLayer
- salesforce - 无法使用 jsforce 将项目添加到 Salesforce 中的自定义选项列表
- selenium-webdriver - ag-Grid <> Selenium:获取网格数据
- python - Pandas:删除重复值但在另一列中保留多少值
- maven - 如何在 mvn 安装期间绕过“'repositories.repository.id' 必须是唯一的”
- union - Presto - UNION Varchar 和 Integer 数据类型
- python - 无法从虚拟环境运行 jupyter
- html - 多个嵌套 ul 元素中 li 的交替背景颜色
- c# - dotnet ef 迁移脚本如何为每次迁移生成一个脚本?