单击网格中的单元格时需要弹出模式答案

【问题标题】：Need to popup modal when you click on a cell in a grid单击网格中的单元格时需要弹出模式
【发布时间】：2021-08-23 12:35:03
【问题描述】：

当我单击网格中的单元格时，我需要一个从引导程序到弹出窗口的模式。我已经定义了模式，但是当我单击网格中的单元格时，我不知道如何将其链接到。

<div class="container">
  <div class="row">
        <div class="col-md-12">

            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-header">
                        <h1>Title</h1>
                    </div>
                    <div class="modal-body">
                        This is body. 
                    </div>
                    <div class="modal-footer">

                        <input class="btn btn-default" value="Close">

                    </div>
                </div>
            </div>

        </div>
  </div>

var cells = document.querySelectorAll('td');
cells.forEach((e)=>{
e.addEventListener("click", ()=>{

上面是我对模态的定义，下面是当您单击网格中的单元格时具有事件侦听器的脚本。我如何将两者联系起来？

【问题讨论】：

标签： javascript html bootstrap-4

【解决方案1】：

$('.modal').modal("show")

Bootstrap 定义了一个接受参数的modal 函数。使用"show" 显示，"hide" 隐藏，"toggle" 切换可见性。

Bootstrap Modal Reference

var cells = document.querySelectorAll('td');
cells.forEach((e) => {
  e.addEventListener("click", () => {
    $('.modal').modal("show");
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <table>
      <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
      </tr>
      <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
      </tr>
      <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
      </tr>
      <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
      </tr>
      <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
      </tr>
    </table>
  </div>
  <div class="row">
    <div class="col-md-12">

      <div class="modal fade" id="myModal">
        <div class="modal-dialog">
          <div class="modal-header">
            <h1>Title</h1>
          </div>
          <div class="modal-body">
            This is body.
          </div>
          <div class="modal-footer">

            <input class="btn btn-default" value="Close">

          </div>
        </div>
      </div>

    </div>
  </div>

【讨论】：

【解决方案2】：

您可以在引导文档中看到：Bootstrap modal

您需要通过其 id 选择模态元素，然后使用方法 show()。它会是这样的：

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
var cells = document.querySelectorAll('td');
cells.forEach((e)=>{
e.addEventListener("click", ()=>{
myModal.show()
}

编辑：

如果您使用的是 bootstrap 4，它将是这样的：

var cells = document.querySelectorAll('td');
cells.forEach((e)=>{
e.addEventListener("click", ()=>{
$('#myModal').modal('show')
}

More info on docs

【讨论】：