Bootstrap Modal：使整个列可点击

Question

我正在website 上测试一些模态窗口，正如您现在看到的那样，模态在点击/触摸播放按钮时切换。

我的问题是：是否可以使整个列可点击并打开模式？

我还尝试使用数据目标为整个 div 定义一个数据切换，但没有任何结果。

这是 HTML 代码：

<!-- Button trigger modal -->
<i class="fa fa-play btn btn-lg" aria-hidden="true" type="button" data-toggle="modal" data-target="#myModal"></i>
</div>
<!-- Modal -->
<div class="modal fade modal-video" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" 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">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Title 1</h4>
  </div>
  <div class="modal-body">
      <video controls="" width="100%" id="video">
      <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
      </video>
      <div class="modal-text">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
      </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn button-eh-magenta">Go to Shop</button>
    <a href=""><button type="button" class="btn button-eh-magenta">Share</button></a>
  </div>
</div>

Answer 1

您可以为您的 div 分配一个 id，然后单击该打开模式并执行以下操作：

$('#specified_div').click(function(){
    $('#targetmodal').modal();
});

另一种方法是添加data-toggle="modal" 和data-target="#targetmodal" 到您想要的任何元素，方法是单击id 为targetmodal 打开的元素模式。

---

这里是引导站点报价：

通过数据属性

无需编写 JavaScript 即可激活模式。设置data-toggle="modal" 在一个控制器元素上，比如一个按钮，以及一个 data-target="#foo" 或 href="#foo" 将特定模式定位到 切换。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

通过 JavaScript

使用单行 JavaScript 调用 id 为 myModal 的模式：

$('#myModal').modal(options)