如何添加「查看更多」链接并在模态框中展示完整内容

我明白你想要的效果——帖子列表里只展示部分内容，点击「查看更多」后通过弹窗展示完整帖子内容，而不是跳转到新页面。之前的方案可能只是做了文本截断和跳转链接，没满足弹窗需求，下面给你一套完整的实现思路：

第一步：准备模态弹窗的HTML结构 #

先在home.php里添加模态框的基础代码（这里用Bootstrap模态框做示例，如果你不用Bootstrap，也可以用原生JS写弹窗逻辑）：

<!-- 模态弹窗 -->
<div class="modal fade" id="postModal" tabindex="-1" aria-labelledby="postModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="postModalLabel">完整帖子内容</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="postFullContent">
        <!-- 这里会动态填充完整帖子内容 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

第二步：PHP从MySQL取数据并处理文本截断 #

在home.php的帖子循环部分，先从数据库取出完整内容，再做截断处理（注意避免截断到单词中间，保证可读性）：

<?php
// 假设你已经完成MySQL数据库连接
$query = "SELECT id, title, content, created_at FROM posts ORDER BY created_at DESC";
$result = mysqli_query($conn, $query);

while ($post = mysqli_fetch_assoc($result)) {
    $postTitle = htmlspecialchars($post['title']);
    $fullContent = htmlspecialchars($post['content']);
    // 截断到200字符，可根据需求调整长度
    $truncatedContent = substr($fullContent, 0, 200);
    
    // 若原内容超过截断长度，添加省略号和查看更多按钮
    if (strlen($fullContent) > 200) {
        $truncatedContent .= '... <button class="btn btn-link view-more-btn" data-content="' . $fullContent . '" data-bs-toggle="modal" data-bs-target="#postModal">查看更多</button>';
    }
?>
<div class="post-item mb-4">
    <h3><?php echo $postTitle; ?></h3>
    <p><?php echo $truncatedContent; ?></p>
    <small>发布时间：<?php echo $post['created_at']; ?></small>
</div>
<?php } ?>

第三步：JS动态填充模态框内容 #

添加一段JavaScript代码，在点击「查看更多」时把完整内容注入到模态框中：

<script>
// 给所有查看更多按钮绑定点击事件
document.querySelectorAll('.view-more-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const fullContent = this.getAttribute('data-content');
        // 若帖子内容包含HTML标签，用innerHTML代替textContent
        document.getElementById('postFullContent').textContent = fullContent;
    });
});
</script>

额外注意事项 #

• 如果帖子内容包含HTML标签，截断前可以先用strip_tags()去除标签，避免前端显示异常；若要保留格式，需更谨慎地处理标签闭合问题。
• 若帖子内容极大，也可以考虑通过AJAX异步请求完整内容（而不是把完整内容存在data-content里），优化页面加载性能。
• 不用Bootstrap的话，也可以自己写原生弹窗：比如一个默认隐藏的div，点击按钮时修改它的display属性显示，关闭时再隐藏，逻辑和上面一致。

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