图片模态框下载按钮无法跳转至下载页面/功能失效

我用HTML/PHP/JS/CSS开发了一个网页，功能是从数据库获取图片并以缩略图形式展示，点击缩略图会弹出带有下载按钮的模态框。但下载按钮无法正常工作，通过浏览器开发者工具检查发现，下载按钮的href属性未显示，推测这是无法跳转至下载页面的原因。

相关代码 #

PHP生成缩略图及模态框结构 #

<div class="card">
    <img data-id="download.php?file=<?php echo $row['img_name'] ?>"
     src="uploaded/<?php echo $row['img_name'] ?>" alt="">
</div>

<div id="modal">
    <div class="top">
        <span class="close-modal">&#10006;</span>
    </div>
    <div class="modal-body">
    </div>
</div>

模态框及下载按钮JS代码 #

let images = document.querySelectorAll(".card > img")
// 遍历所有图片并绑定点击事件
for (i = 0; i < images.length; i++) {
    let img = images[i]
    img.addEventListener('click', showModal, false)     
}

let modal = document.querySelector("#modal")

function showModal() {
    // 显示模态框
    modal.style.display = 'flex';

    // 获取模态框主体
    let modalBody = document.querySelector(".modal-body");

    // 清空之前的内容
    modalBody.innerHTML = ""
   
    // 创建图片元素
    let modalImg = document.createElement('img');
    modalImg.src = this.getAttribute('src');
    
    // 创建下载按钮（原问题：button元素无href属性）
    let downloadBtn = document.createElement('button');
    let linkText = document.createTextNode("Download");
    downloadBtn.appendChild(linkText);
    downloadBtn.href = this.getAttribute('data-id'); // 无效，button不支持href

    // 添加元素到模态框
    modalBody.appendChild(modalImg);
    modalBody.appendChild(downloadBtn);

    body.style.overflow = "hidden"; // 原代码未定义body变量，会报错
}

let closeBtn = document.querySelector(".close-modal")
closeBtn.addEventListener('click', closeModal, false)

// 关闭模态框
function closeModal() {
    modal.style.display = 'none';
    body.style.overflow = "auto"; // 同样未定义body变量
}

download.php代码 #

if(isset($_GET['file'])){
    $filename = basename($_GET['file']);
    $filepath = 'uploaded/'. $filename;
    if(!empty($filename) && file_exists($filepath)){
        header('Content-Description: File Transfer');
        header("Content-Type: application/octet-stream");
        header("Content-Disposition: attachment; filename=  $filename");
        header('Expires: 0');
        header('Cache-Control: must-revalidate');
        header('Pragma: public');
        header('Content-Length: ' . filesize($filename)); // 错误：路径应为$filepath
        readfile($filepath);
        exit;
    }
    else{
        echo "File not exists";
    }
}

模态框CSS代码 #

#modal {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(111, 111, 111, 0.6);
    z-index: 100;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .top{
    width: 90%;
    text-align: end; 
    margin-bottom: 5px;
  }
  .close-modal {
    color: #fff;
    font-size: 20px;
    background-color: brown;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 5px;
  }
  .modal-body {
    width: 90%;
    text-align: center;
    
  }
  
  .modal-body img {
    width: 100%;
    margin-bottom: 2px;
  }
  .modal-body button{
    padding: 10px 15px;
    background-color: #8c2424;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    border: none;
    box-shadow: 2px 2px 5px 1px #1b1b1b;
    text-transform: uppercase;
  }

问题分析与修复方案 #

核心问题1：button元素不支持href属性 #

button标签本身没有href属性，给它设置downloadBtn.href不会生效，浏览器也不会渲染该属性。有两种修复方式：

方案1：改用标签模拟按钮

将创建button的代码替换为标签，保留按钮样式：

// 替换原创建downloadBtn的代码
let downloadBtn = document.createElement('a');
downloadBtn.textContent = "Download";
downloadBtn.href = this.getAttribute('data-id');
downloadBtn.classList.add('download-btn'); // 添加类名用于样式

.modal-body .download-btn{
    padding: 10px 15px;
    background-color: #8c2424;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    border: none;
    box-shadow: 2px 2px 5px 1px #1b1b1b;
    text-transform: uppercase;
    text-decoration: none; /* 去掉链接下划线 */
    display: inline-block; /* 确保padding生效 */
}

// 创建button后添加以下代码
downloadBtn.setAttribute('data-id', this.getAttribute('data-id'));
downloadBtn.addEventListener('click', function() {
    window.location.href = this.getAttribute('data-id');
});

核心问题2：download.php的filesize参数错误 #

原代码中filesize($filename)使用了仅文件名的参数，应改为完整路径$filepath：

header('Content-Length: ' . filesize($filepath));

额外修复：JS中未定义body变量 #

原代码里body.style.overflow会报错，需在JS开头添加：

let body = document.body;

修复后的完整JS代码示例（方案1） #

let images = document.querySelectorAll(".card > img")
let body = document.body;
for (i = 0; i < images.length; i++) {
    let img = images[i]
    img.addEventListener('click', showModal, false)     
}

let modal = document.querySelector("#modal")

function showModal() {
    modal.style.display = 'flex';
    let modalBody = document.querySelector(".modal-body");
    modalBody.innerHTML = ""
   
    let modalImg = document.createElement('img');
    modalImg.src = this.getAttribute('src');
    
    // 使用a标签作为下载按钮
    let downloadBtn = document.createElement('a');
    downloadBtn.textContent = "Download";
    downloadBtn.href = this.getAttribute('data-id');
    downloadBtn.classList.add('download-btn');

    modalBody.appendChild(modalImg);
    modalBody.appendChild(downloadBtn);

    body.style.overflow = "hidden";
}

let closeBtn = document.querySelector(".close-modal")
closeBtn.addEventListener('click', closeModal, false)

function closeModal() {
    modal.style.display = 'none';
    body.style.overflow = "auto";
}

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