Twitter Bootstrap 3模式對話框不顯示

Question

我有一個twitter引導程序模式，該模式無法正確顯示對話框，而且我不確定為什么。

的HTML

<p class="text-center btn-p"><button class="btn btn-warning" data-toggle="modal" data-target="#myModal2">Compare</button></p>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal2Label" aria-hidden="true">
 <div class="modal-dialog modal-lg">
    <div class="modal-content">
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="myModal2Label">New Label</h4>
     </div>
    <div class="modal-body">
        <p>Something for now.</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
 </div>
</div>

您可以在此頁面上看到html的運行情況： Superfood Picker單擊首頁上的“比較”按鈕。

僅基於html我不明白為什么它不起作用。

其他相關要點：

1）。 我在同一頁面上有兩個模態。

2）。 另一個工作正常。

3）。 當我將功能異常模式的ID切換為正確顯示的模式的ID時，該模式也將正確顯示。

4）。 后一點向我暗示，也許是調用模式的HTML才是問題所在，但是當我將兩者進行比較時，我看不出為什么一個會起作用而另一個卻不起作用。

這是第二個（功能性）模式的HTML：

HTML（通過jquery函數調用）

$(".button-class").html("<div class='text-center'><ul class='list-inline'><li><button class='btn btn-success'><a href=" + state.greens[num].website + " target='_blank'>Company Website</a></button></li> <li><button class='btn btn-success' data-toggle='modal' data-target='#myModal'>View the Label</button></li></ul></div>");

我以為這兩個可能會互相干擾，但是如果是這種情況，我不確定第二個為什么會正常工作。

Answer 1

如上所述，ID為“ part2”的DIV顯示為：none。 模態位於該DIV中。 您需要使該DIV顯示塊對模式可見。