Bootstrap Modal：使整个列可点击

我正在测试这个website某些模式窗口，现在您可以看到模式在点击/触摸播放按钮时切换。Bootstrap Modal：使整个列可点击

我的问题是：是否有可能使整个列可点击并使模态打开？

我试图为整个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>

来源

2017-07-17 Roxana

您可以指定要在点击打开模式为您的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

呼叫ID为myModal模态的JavaScript单行：
$('#myModal').modal(options) 

来源

2017-07-17 13:30:16

嗨，我已经与分配的数据切换和数据试图-target到一个div，但结果是不可能关闭模式。 – Roxana

你在控制台中是否有错误？ –

没有错误。你可以看一下，我已经按照你的建议为第一列申请了数据目标和数据。碰巧模式没有关闭。 http://cms.nowcommu.myhostpoint.ch/ – Roxana

Bootstrap Modal：使整个列可点击

回答

相关问题