我用bootstrap 3尝试了这个，它工作正常。我正在使用bootstrap 4尝试相同的操作，当我单击通过锚标记创建的两个按钮时，模态不会出现。
我看过类似的帖子有同样的问题，但是他们主要涉及错误地使用。对于与ID相对的类引用。但对我来说情况并非如此，我也尝试过将实际的modal.css和脚本链接到modal.js文件，但那些也没有用。
<div id="updateCred">
<header>Update Credentials</header>
<p> Please Choose to Update Your Username/Password </p>
<div id="updateCred">
<header>Update Credentials</header>
<p> Please Choose to Update Your Username/Password </p>
<a href="#usernameModal" class="btn btn-lg btn-light" data- toggle="modal" data-target="#usernameModal">Update Username</a>
<a href="#passModal" class="btn btn-lg btn-light" data-toggle="modal" data-target="#passModal">Update Password</a>
<!-- Modal -->
<div id="usernameModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Change Username</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="passModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Change Password</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
我发现它是什么。
您需要添加jquery和bootstrap.js脚本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="bootstrap-4.0.0/dist/js/bootstrap.js"></script>
答案 1 :(得分：0)
您的代码有两个错误！请关闭此标签：
<div id="updateCred">
....
</div>
然后请在此行中更正“数据切换”：
<a href="#usernameModal" class="btn btn-lg btn-light" data-toggle="modal" data-
target="#usernameModal">Update Username</a>
答案 2 :(得分：-1)
<!DOCTYPE html>
<html lang="en">
<head>
<title> Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="updateCred">
<header>Update Credentials</header>
<p> Please Choose to Update Your Username/Password </p>
<div id="updateCred">
<header>Update Credentials</header>
<p> Please Choose to Update Your Username/Password </p>
<a href="#usernameModal" class="btn btn-lg btn-light"
data-toggle="modal" data-target="#usernameModal">Update Username</a>
<a href="#passModal" class="btn btn-lg btn-light" data-toggle="modal"
data-target="#passModal">Update Password</a>
<!-- Modal -->
<div id="usernameModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button
type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Change Username</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button
type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="passModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button
type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Change Password</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button
type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title> Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="updateCred">
<header>Update Credentials</header>
<p> Please Choose to Update Your Username/Password </p>
<div id="updateCred">
<header>Update Credentials</header>
<p> Please Choose to Update Your Username/Password </p>
<a href="#usernameModal" class="btn btn-lg btn-light" data-
toggle="modal" data-target="#usernameModal">Update Username</a>
<a href="#passModal" class="btn btn-lg btn-light" data-toggle="modal"
data-target="#passModal">Update Password</a>
<!-- Modal -->
<div id="usernameModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">×</button>
<h4 class="modal-title">Change Username</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="passModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">×</button>
<h4 class="modal-title">Change Password</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>