bootstrap-modal - bootstrap 5 modal 根本不显示
问题描述
引导模式未显示。我已经包含了所有必要的文件。
我曾尝试将 JS 文件移动到之前以及之前,但没有一个工作。我在 jsfiddle 上尝试了我的代码,但也无法正常工作
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<a href="#" data-toggle="modal" data-target="#exampleModal">open</a>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>
</html>
解决方案
Bootstrap 5 数据属性现在使用bs
命名空间,因此要触发模态它将是......
<a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal">open</a>
也不需要 jQuery。
注意:所有 Bootstrap 5 javascript 组件(如导航栏、下拉菜单、折叠等data-bs-
)都需要该标记...
推荐阅读
- swiftui - 如何在 SwiftUI 中使视图宽度等于超级视图
- express - 捆绑 express.js 和 next.js 应用程序抛出错误:找不到模块 next.config.js'
- c++ - Windows 中的控制台写入包装器
- python - 如何在 Visual Studio 代码中使用 gTTS(谷歌文本到语音)?
- swift - 使用 ASWebAuthenticationSession 时清除 cookie
- bootstrap-modal - 如何创建在博客主页中显示博客帖子的模式?
- ruby - 如何“神奇地”将代码添加到 ruby 中的所有公共类方法?
- swift - 将单元格删除功能从 Swift 3 转换为 Swift 5
- c# - unity tilemap 中的可破坏图块
- vuejs2 - 组件仅呈现元素名称而不是模板内容