我正在测试这个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">×</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>
答案 0 :(得分:0)
您可以在点击该开放式模式时为您的div指定一个ID,并执行以下操作:
$('#specified_div').click(function(){
$('#targetmodal').modal();
});
另一种方法是通过点击标识为data-toggle="modal"
的元素模式,将data-target="#targetmodal"
和targetmodal
添加到您想要的任何元素。
以下是bootstrap网站引用:
通过数据属性
在不编写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)