Angular 引导模式不显示
我想在单击按钮时显示一个模式,但该模式不显示 我将模式指定为按钮的数据目标,但我没有得到任何信息,控制台上也没有错误Angular 引导模式不显示,angular,bootstrap-modal,Angular,Bootstrap Modal,我想在单击按钮时显示一个模式,但该模式不显示 我将模式指定为按钮的数据目标,但我没有得到任何信息,控制台上也没有错误 <button type="submit" data-toggle="modal" data- target="#someModal">Test</button> <!-- Modal --> <div class="modal fade" id="someModal" role="dialog"> <div cl
<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页面中。我认为您没有添加
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,请选中此项
谢谢您在
数据-
之后和目标
之前有一些空格。只要把它们放在同一条线上就行了。关闭按钮的数据解除
也是如此。
另外,我要删除type=“submit”
,因为官方文档不需要它:
以下是工作代码:
<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>
测试
&时代;
情态文本
接近
帮自己一个忙,使用ng引导而不是jQuery。你的其他引导类working@NipunTharuksha是的,他们work@annie现在可以使用了吗?在删除这些空格而不添加jquery
@NipunTharuksha Boostrap要求jquery工作后,它是否可以使用。请看,我也删除了这个空间,但直到我再次添加Jquery
@NipunTharuksha,它才起作用,这是因为引导需要Jquery才能起作用。没有jQuery,每个使用jQuery(比如modals)的引导组件都无法工作。