Twitter Bootstrap 3模式对话框不显示

Question

I have a twitter bootstrap modal that does not render the dialog box correctly and I'm not sure why.

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>

You can see the html in action on this page: Superfood Picker Click on the "Compare" button on the front page.

Based on the html alone I don't see why it doesn't work.

Other relevant points:

1). I have two modals on the same page.

2). The other one works fine.

3). When I switch the ID of the dysfunctional modal to the ID of the modal that displays correctly that modal also displays correctly.

4). The latter point would suggest to me that maybe it's the HTML that calls the modal that's the problem, but when I compare the two I don't see why one would work and the other wouldn't.

Here's the HTML for the second (functional) modal:

HTML (called through a jquery function)

$(".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>");

I thought that maybe the two were interfering with one another, but if that was the case I'm not sure why the second one would work fine.

Answer 1

As mentioned above, the DIV with an ID of "part2" is display:none. The modal is inside that DIV. You need to make that DIV display block for the modal to be visible.