Bootstrap模態頁腳無法正確顯示

Question

我使用的是Bootstrap Modal，模態頁腳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，它使用模板和Ajax調用的返回值來設置主體的html。 一切正常，模態主體正確顯示。

模態主體由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語法檢查器，以確保我沒有任何未關閉的標簽。 我也嘗試將form標記放置在代碼中的幾個不同位置，但是無論我做什么，modal-footer部分都無法正確顯示。

有任何想法嗎？

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>