Javascript 引导模式页脚未正确显示

我使用的是引导模式，模式页脚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>

×
取消
拯救

您将看到模态体部分是空的。这是因为我有一个javascript，它使用Mustache.js模板系统使用模板和Ajax调用的返回来设置主体的html。确保所有功能正常工作，并且模态实体显示正确

模态主体由一个引导选项卡控件和一个包含所有选项卡窗格的窗体组成，因此总体结构如下所示

<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>

... 带有标签和输入控件的窗体组div。。。
... 带有标签和输入控件的窗体组div。。。

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

---

有什么想法吗？

您的页脚在modal content 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>

×
记住，皮特
取消
拯救

您可以使用jsfiddle.netThanks Travis共享代码吗？这就解决了这个问题。盯着那个看了好几个小时，却没注意到！标记为正确答案。@Pete同样的事情发生在我身上！真不敢相信我错过了！谢谢你的问题和有用的答案

<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-->