我正在尝试使用 Bootstrap 5 入门模板(我使用 Bootstrap Bundle with Popper 选项)来实现一个简单的模态,但由于某种原因,它不起作用。我已经解决了其他类似的问题,但不幸的是,没有一个对我有用。我想不通我哪里出错了。
我附上了简化的代码片段。我试图避免使用 javascript 来触发模态。我想使用 HTML data-* 属性来触发模式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<h2>Basic Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
Open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" …Run Code Online (Sandbox Code Playgroud)