javascript - Bootstrap 模态未显示。如何解决？

Question

我想在点击“reportpet”时显示模态，但它不显示模态。我该如何解决这个错误，请帮助我。

网址:

http://newseinstein.com/Rwork/index.php/Pet/view/104

HTML:

   <span class="text">
       <a href="#" class="button" data-toggle="modal" data-target="locationreport" id="reportpet">Report</a>
   </span>

模态代码:

<div class="modal fade" id="locationreport" role="dialog" style="display: none;"> 
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>

JS代码:

  $("#reportpet").click(function(){
    $("#locationreport").show();
  })

Answer 1

将数据目标更改为 data-target="#locationreport" 您需要在模态的 id 之前添加 #

<span class="text">
       <a href="#" class="button" data-toggle="modal" data-target="#locationreport" id="reportpet">Report</a>
</span>

See bootply