【发布时间】：2019-12-07 10:38:43
【问题描述】：
当我点击一个元素时，我想在我的文档中显示一个模式。我能够使其与默认引导程序“数据切换”和“数据目标”属性一起使用。但是当我尝试使用 JavaScript 实现相同的效果时，模式并没有出现。以下是相关代码：
<span class="navbar-text">
<a href="" id="login">
<span class="fa fa-sign-in fa-lg"></span>
Login
</a>
</span>
<script>
$(document).ready(function () {
$("#login").click(function () {
$("#loginModal").modal('show');
});
});
</script>
它只是似乎在模态中淡出一瞬间，但它没有显示出来。
下面是我要展示的模态 div：
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3"
placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-2">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
【问题讨论】：
-
你也可以分享 HTML 吗？
-
你指的是实际的模态div吗？
-
是的，您使用的代码是正确的，所以除非您共享 HTML，否则无法帮助您。
-
我已编辑问题并放入模态 div。
-
发现问题，请看下面的回复。
标签： javascript jquery html bootstrap-4