我正在ASP.NET Core MVC应用程序的视图上使用两个不同的Bootstrap模态组件。对于第二个模式,即使标记与第一个模式非常相似,也不会显示页脚。按预期显示第一个模态的页脚。
<div class="modal fade" id="firstModal" tabindex="-1" role="dialog" aria-labelledby="firstModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="firstModalTitle">First Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" />
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-labelledby="secondModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="secondModalTitle">Second Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" />
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
每个模态都通过单击相应的按钮显示,但是每个按钮的设置方式略有不同。
$('#button1').click(function (e) {
var success = doStuff();
if (success) {
$('#firstModal').modal('toggle');
};
});
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#secondModal"></button>
Chrome Web开发人员工具中未显示任何错误。这可能是什么问题?
我现在找到了解决方案。模式的主体中有一个由某些Java脚本填充的下拉列表。
<select class="form-control" />
将标记更改为:
<select class="form-control"></select>
现在也正确显示了页脚。