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>

如何在单击图像时使用数据表创建弹出窗口？

2 个答案: