如何使用jquerymodal.com模态框向PHP模态页面传递变量？

嘿，我来帮你搞定这个问题！针对你用的这款第三方模态框，给内嵌的modal.php传递变量其实有几种简单的方案，不用太复杂的jQuery知识就能实现：

1. 静态变量（页面加载时就确定值） #

如果变量是页面渲染时就固定的，直接在当前PHP页面定义好，再通过include传递就行——因为include是服务器端执行的，变量作用域是互通的：

<?php
// 当前页面先定义要传递的变量
$userName = "TahaG";
$itemId = 123;
?>

<div id="ex2" class="modal">
  <p><?php include('modal.php'); ?></p>
  <a href="#" rel="modal:close">Close</a>
</div>
<a href="#ex2" rel="modal:open"><i class="fas fa-comment-dots fa-2x"></i></a>

然后在modal.php里直接使用这些变量：

<!-- modal.php内容 -->
<p>欢迎你，<?php echo $userName; ?>！你查看的项目ID是：<?php echo $itemId; ?></p>

2. 动态变量（点击时传递不同值） #

如果需要根据不同的点击操作传递不同的变量，那就利用这款模态框自带的AJAX加载功能，不用提前把modal.php嵌入页面，而是让模态框打开时动态请求并传参：

首先修改触发链接，把href直接指向modal.php并带上参数，保持rel="modal:open"即可：

<!-- 比如传递itemId=456 -->
<a href="modal.php?itemId=456" rel="modal:open"><i class="fas fa-comment-dots fa-2x"></i></a>

然后在modal.php里通过$_GET获取参数：

<?php
// 获取传递的变量
$itemId = $_GET['itemId'];
// 这里可以做数据库查询等操作
?>

<!-- modal.php的内容 -->
<p>你选择的项目ID是：<?php echo $itemId; ?></p>
<a href="#" rel="modal:close">Close</a>

3. 从JS动态生成参数 #

如果变量是前端JS生成的（比如用户输入、页面交互得到的值），只需要用一点点原生JS修改触发链接的href即可：

<a href="#" id="dynamicModalBtn" rel="modal:open"><i class="fas fa-comment-dots fa-2x"></i></a>

<script>
// 假设这是前端动态获取的变量
var dynamicValue = "789";

// 给按钮绑定点击事件，修改跳转地址
document.getElementById('dynamicModalBtn').addEventListener('click', function() {
  this.href = `modal.php?dynamicVar=${dynamicValue}`;
});
</script>

这样点击按钮时，就会把动态生成的参数传给modal.php，同样用$_GET['dynamicVar']就能拿到值。

内容的提问来源于stack exchange，提问作者TahaG