我想在单击按钮时显示模态,但是模态不显示。
我将模式指定为按钮的数据目标,但我什么也没得到,控制台上也没有错误。
<button type="submit" data-toggle="modal" data-
target="#someModal">Test</button>
<!-- Modal -->
<div class="modal fade" id="someModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
</div>
<div class="modal-body">
<p>Modal text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
此代码在我的component.html页面中。
答案 0 :(得分:1)
您在data-
之后和target
之前有一些空格。只需将它们放在同一行上即可。 data-dismiss
的关闭按钮也是如此。
另外,我将删除type="submit"
,因为官方文档Modal - Bootstrap并不需要。
这是工作代码:
<button data-toggle="modal" data-target="#someModal">Test</button>
<!-- Modal -->
<div class="modal fade" id="someModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Modal text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
答案 1 :(得分:0)
我认为您尚未添加JQuery
。因此,我通过添加bootstrap JQuery
及其工作来获得代码。
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<button type="submit" data-toggle="modal" data-target="#someModal" class="btn btn-danger">Test</button>
<!-- Modal -->
<div class="modal fade" id="someModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
</div>
<div class="modal-body">
<p>Modal text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
要安装引导JQuery,请检查此How to add JQuery to Angular 谢谢