如何在單擊圖像時使用數據表創建彈出窗口？

Question

---

「作爲新的數據表概念，我很困惑創建彈出式圖像點擊時」我不知道任何涉及圖像彈出的dataTables概念？

Answer 1

你不能用數據表做到這一點。 但是用JavaScript來做這件事很簡單。 這是一個非常簡單的例子，您可以將其作爲基本使用;

CSS

<style> 
    button{ 
     background-color: transparent; 
     border: 0; 
    } 
    #PopUp{ 
     display: none; 
    } 
</style> 

HTML

<button onclick="funcPop()" id="btnPop"><img src=""></button> 
<div id="PopUp"> 
    <h1>POPUP</h1> 
</div> 

腳本

<script> 
    funcPop = function(){ 
     document.getElementById('btnPop').style.display = "none"; 
     document.getElementById('PopUp').style.display = "block"; 
    } 
</script> 

注重這一代碼將不會爲工作類，如果您添加到按鈕類而不是ID，這意味着 - 你需要另一種解決方案，smthng一樣（當然改變的id到類）：

$('.btnPop').click(function(){ 
    var x = document.getElementsByClassName("PopUp"); 
    for (var i = 0; i < x.length; i++) { 
     x[i].style.display = 'table-row'; 
    } 
}); 

而且不要忘了，你有很多美觀大方，重量輕，易於使用的jQuery插件

Answer 2

您可以使用Bootstrap Modal和一些jQuery代碼：
腳本

$('#myDataTable > tr > td > img.className').on('click',function(){ 
    $('.modal').modal(); 
    ... 
}) 

HTML

<div class="modal fade" tabindex="-1" role="dialog"> 
    <div class="modal-dialog modal-lg" role="document"> 
    <div class="modal-content"> 
     ... 
    </div> 
    </div> 
</div>