如何使用 bootstrap/adminlte 在链接单击时动态生成模式对话框？

Posted 2023-05-08

【中文标题】如何使用 bootstrap/adminlte 在链接单击时动态生成模式对话框？

【英文标题】：How to I dynamically generate a modal dialog on link click with bootstrap/adminlte?

【发布时间】：2021-12-07 13:44:21

【问题描述】：

我正在开发一个小型 php/html 项目，该项目让我自定义了一个 AdminLTE 模板以用作 Web 仪表板。

我想使用内置的引导模式对话框功能并拥有它，以便当用户单击特定链接时，模式会动态生成，其中包含特定于该链接的内容。

到目前为止，我已经能够使模态功能正常工作，但绝不是动态的，我无法思考如何做到这一点（我通常是 .net/powershell 等领域的开发人员并且不要不要过多地玩弄这些东西，如果我的术语不太准确，请原谅。）

在我的页面内容中，我正在生成这样的链接（PHP 查询 MSSQL 并构建 HTML 表）...

 if ($numrows)
            while( $row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC) ) 
        
            echo '  <tr>';
            echo '      <td>' . $row['did'] . '</td>';
            echo '      <td><a data-toggle="modal" data-target="#modal-default">' . $row['hostname'] . '</a></td>';
            //echo '<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-default">';
            echo '      <td>' . $row['os'] . '</td>';
            echo '      <td><span class="badge bg-success">Online</span></td>';
            echo '    </tr>';
            
            
        

当用户点击链接时，从#modal-default 激活模态，当前在同一个PHP页面上定义，像这样...

 <div class="modal fade" id="modal-default">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Default Modal</h4>
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>One fine body...</p>
        </div>
        
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->

所以我猜我需要在其他地方有链接点，可能是 javascript 或其他引用不同 PHP 文件的东西，以在动态构建模式之前检索特定于该链接的内容。

谁能指出我实现这一目标的正确方向？

【参考方案1】：

所以在玩了很多之后，我终于确定了这一点，并想分享一下，以防其他人遇到这个......

我修改了链接以包含一个类，就像这样......

  echo '<td><a class="loadmodalcontent" data-toggle="modal" data-target="#modal-default">' . $row['hostname'] . '</a></td>';

然后我在底部添加了下面的JS ...

 <script>
 $('.loadmodalcontent').on('click',function()
$('.modal-body').load('test.html',function()
    $('#modal-default').modal(show:true);
);
);
</script>

由此产生的行为是加载了模态并将 test.html 的内容加载到模态体中。