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：使整個列可點擊

回答

相關問題