Bootstrap 模态页脚无法正确显示

Question

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

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

模态定义如下所示：

<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 id="concert-modal-title" class="modal-title"></h4>
        </div>
        <div id="concert-modal-body" class="modal-body">

        </div>
    </div>

    <div class="modal-footer">
        <span id="ConcertMessage" class="pull-left"></span>
        <button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>
        <button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>
    </div>

</div>

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

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

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

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

有什么想法吗？

Answer 1

您的页脚位于模态内容 div 之外。 结构应该去：

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

您拥有它（顺便说一句，您在 html 中缺少一个 div）：

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

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

$(document).ready(function(){
	$('#concert-modal').modal('show');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 id="concert-modal-title" class="modal-title">Mark it Pete</h4>
            </div>
            <div id="concert-modal-body" class="modal-body">
                <img src="https://s-media-cache-ak0.pinimg.com/originals/ec/f3/fe/ecf3fedfa44312bb0fe6bcb953c8718f.gif" style="max-height: 50px;"/>
            </div>
            <div class="modal-footer">
                <span id="ConcertMessage" class="pull-left"></span>
                <button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>
                <button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>
            </div>
        </div>
    </div>
</div>