Bootstrap Modal不显示页脚

问题描述 投票:0回答:1

我正在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开发人员工具中未显示任何错误。这可能是什么问题?

asp.net-mvc asp.net-core bootstrap-modal
1个回答
0
投票

我现在找到了解决方案。模式的主体中有一个由某些Java脚本填充的下拉列表。

<select class="form-control" />

将标记更改为:

<select class="form-control"></select>

现在也正确显示了页脚。

© www.soinside.com 2019 - 2024. All rights reserved.