Bootstrap 模态页脚未正确显示

Question

我正在使用 Bootstrap Modal，模态页脚 div 显示为用于遮挡主页的灰色背景，而不是模态其余部分使用的白色背景。

\n\n

这是一个有点复杂的设置，但我会尽力解释它。

\n\n

模态定义如下所示：

\n\n

<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">\n<div class="modal-dialog" role="document">\n    <div class="modal-content">\n        <div class="modal-header">\n            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">\xc3\x97</span></button>\n            <h4 id="concert-modal-title" class="modal-title"></h4>\n        </div>\n        <div id="concert-modal-body" class="modal-body">\n\n        </div>\n    </div>\n\n    <div class="modal-footer">\n        <span id="ConcertMessage" class="pull-left"></span>\n        <button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>\n        <button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>\n    </div>\n\n</div>\n

\n\n

\n\n

您会看到模态主体部分是空的。那是因为我有 javascript，它使用 Mustache.js 模板系统来使用模板设置正文的 html 并从 Ajax 调用返回。一切正常，模态主体显示正确。

\n\n

模式主体由 Bootstrap 选项卡控件和包含所有选项卡窗格的表单组成，因此整体结构如下所示。

\n\n

<ul class="nav nav-tabs nav-justified nav-justify">\n    <li class="active"><a href="#tab-1" role="tab" data-toggle="tab">Basic </a></li>\n    <li><a href="#tab-2" role="tab" data-toggle="tab">Media </a></li>\n    <li><a href="#tab-3" role="tab" data-toggle="tab">Tickets </a></li>\n</ul>\n<form id="concert-form" action="#" class="form-horizontal">\n    <div class="hidden">\n        <input type="text" name="Mode" id="Mode">\n        <input type="text" name="ConcertID" value="{{ConcertID}}">\n    </div>\n    <div class="tab-content" style="margin-top:20px;">\n... form-group divs with labels and input controls...\n</div>\n<div class="tab-content" style="margin-top:20px;">\n... form-group divs with labels and input controls...\n</div>\n</form>\n

\n\n

我使用了 html 语法检查器来确保没有任何未封闭的标签。我还尝试将表单标签放置在代码中的几个不同位置，但无论我做什么，模式页脚部分都无法正确显示。

\n\n

有任何想法吗？

\n

Answer 1

您的页脚位于模态内容 div 之外。\n结构应为：

\n\n

<div class="modal">\n    <div class="modal-dialog">\n        <div class="modal-content">\n            <div class="modal-header"></div>\n            <div class="modal-body"></div>\n            <div class="modal-footer"></div>\n        </div>\n    </div>\n</div>\n

\n\n

你有这样的（顺便说一句，你在发布的html中缺少一个div）：

\n\n

<div class="modal">\n    <div class="modal-dialog">\n        <div class="modal-content">\n            <div class="modal-header"></div>\n            <div class="modal-body"></div>\n        </div>\n        <div class="modal-footer"></div>\n    </div>\n</div> <!--missing div in the example you posted here-->\n

\n\n

下面的功能代码可以让您看到正确的结构：

\n\n

\r\n

\r\n

<div class="modal">\n    <div class="modal-dialog">\n        <div class="modal-content">\n            <div class="modal-header"></div>\n            <div class="modal-body"></div>\n            <div class="modal-footer"></div>\n        </div>\n    </div>\n</div>\n

\r\n

<div class="modal">\n    <div class="modal-dialog">\n        <div class="modal-content">\n            <div class="modal-header"></div>\n            <div class="modal-body"></div>\n        </div>\n        <div class="modal-footer"></div>\n    </div>\n</div> <!--missing div in the example you posted here-->\n

\r\n

\r\n

\r\n

\n