Question

https://jsfiddle.net/0z9mbp4r/

    <tr>
  <td>11</td>
  <td><a data-toggle="modal" data-target="modal10">Miscellaneous Title</a></td>
  <td><p>C+</p></td>
  <td><i class="fa fa-star"></i></td>
  <td><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
  <td><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
  <td><p>A+</p></td>
  <td><p>No</p></td>
  <td><p>B</p></td>
  <td><p>B+</p></td>
</tr>

    <div class="modal fade" id="modal10" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-lg modal-dialog" role="document">
    <div class="modal-content p-2">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button></br></br>
        <div class="row">
          <div class="col-sm-12 col-md-6 my-auto">
            <img class="card" src="(imageinfo)" title="(info)" alt="(info)">
          </div>
          <div class="col-sm-12 col-md-6">
            <h3>Name</h3>
            <p>Miscellaneous Info</p>
          </div>
          <div class="col-sm-12 col-md-12">
            <p>Miscellaneous Info</p>
            <br>
            <a href="#">View Miscellaneous Link</a><br>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

对不起，代码导入无法正常工作。

由于某种原因，我无法弄清楚为什么此模式未正确弹出？我的每个模式/表格行的标记都相同，因此应该正确调用它。当我单击突出显示模式的表格行时，它只是淡出了黑色/灰色，然后没有弹出模式吗？在控制台中也没有得到任何错误。

感谢您的协助。谢谢！

Answer 1

解决方案很简单-您打错了字。

您在#中缺少data-target="modal。

替换此：

<a data-toggle="modal" data-target="modal10">Miscellaneous Title</a>

收件人：

<button data-toggle="modal" data-target="#modal10">Miscellaneous Title</button>

请注意，使用<button>打开模式可能会更好。

Bootstrap 4模态不显示-黑屏无模态？

1 个答案: