Wie erstellt man ein Popup mit Hilfe von Datentabellen, wenn auf ein Bild geklickt wird?

Question

"Wie neu im Konzept der Datatables, habe ich verwirrt Popup zu schaffen, wenn das Bild angeklickt wird" Ich kenne kein dataTables-Konzept, das Popups auf Bildern beinhaltet?

Answer 1

Sie können dies nicht mit Datenträgern tun. Aber es ist ziemlich einfach mit Javascript zu tun. Hier ist ein sehr einfaches Beispiel und Sie können es als Basis verwenden;

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

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

Darauf achten, dass dieser Code nicht für arbeiten wird Klassen, was bedeutet, wenn Sie auf Schaltfläche, um eine Klasse und nicht-ID - Sie eine andere Lösung benötigen, smthng wie (natürlich Klassen ändern ids):

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

Und vergessen Sie nicht, dass Sie viel haben schöne, leicht und einfach zu bedienende jQuery Plugins

Answer 2

können Sie Bootstrap Modal verwenden und einige jQuery-Code:
Script

$('#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>