HTML电商项目产品Overlay弹窗无法显示，求技术解决方案

项目基础信息 #

• 技术栈：PHP、phpMyAdmin（数据库名ecommerce，表名products）、HTML、JavaScript，配套css和images资源文件夹
• 实现逻辑：通过PHP循环读取products表数据，渲染为带onclick事件的HTML商品项；点击商品调用带商品编号参数的openNav()函数，触发Overlay弹窗展示商品详情
• 问题现象：点击商品后Overlay弹窗始终无法显示
• 已尝试调试：移除/修改openNav()参数、浏览器开发者工具直接调用函数、调整CSS样式，均未解决
• 参考逻辑：基于w3schools的Overlay实现思路开发

Products.php代码 #

<!DOCTYPE HTML>
<html>
<head>
<link href="css/Products.css" type="text/css" rel="stylesheet" />
</head>

<body>

    <!-- The overlay -->
    <div id="prodOverlay" class="overlay">
    
        <!-- Button to exit the overlay -->
        <a href="javascript:void(0)" class="closebtn" onclick="closeProdOverlay()">&times;</a>
    
        <!-- Product Overlay Contents -->
        <div class="overlay-content">
            <label id = "disItemNum">couldnt find number</label>
            <label id = "disInfo">error in loading description</label>
        </div>
    </div>
    
    <script>
        //opens the product menu (presently does absolutely nothing because it doesnt appear)
        function openNav(itemNum){
            document.getElementById("prodOverlay").style.height = "100%";
            document.getElementById("disItemNum").innerHTML = itemNum;
        }
        //closes the product menu
        function closeProdOverlay() {
            document.getElementById("prodOverlay").style.width = "0%";
        }
    </script>
    
    <?php
        //sever login information
        $servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "ecommerce";
    
        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);
        // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }
    
        //retrieves data from sql
        $sql = "SELECT 'item number', title, description, picture, price FROM products";
        $result = $conn->query($sql);
    
        //iterates through products and prints to screen
        if ($result->num_rows > 0) {
            $ind = 1; //records number of iterations
            // output data of each row
            while($row = $result->fetch_assoc()) {
                echo 
                    "<div onclick=\"openNav(" . strval($ind) . \")\" style=\"cursor:pointer\" class = \"item\"> <img src=\"images/" . $row["picture"] . /* product info in list also assigns each product an id for js */
                    "\" alt=\"product\" title=\"product\">" . $row["price"]  . 
                    "  " . $row["title"] . " " . strval($ind) . "</div><br>";
                $ind++;
            }
        } else {
            echo "0 results";
        }
    ?>

</body>
</html>

Products.css代码 #

body {
    background-color: rgb(101, 107, 155);
}
.overlay {
    height: 0%;
    width: 0;
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0, 0.9); 
    overflow-x: hidden; 
    transition: 0.5s; 
}

.overlay-content {
    position: relative;
    top: 25%; 
    width: 100%;
    text-align: center; 
    margin-top: 30px; 
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}
.item {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
}

.item img {
    float: left;
    margin: 0 10px 0 -25px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

@media screen and (max-height: 450px) {

    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

表详情 #

表字段包含：item number（商品编号）、title（商品标题）、description（商品描述）、picture（图片路径）、price（价格）

1. 修复PHP输出HTML的语法错误 #

你在生成onclick事件时写了错误的转义字符：

echo "<div onclick=\"openNav(" . strval($ind) . \")\" ...

这里的\")是错误写法，应该改成")\"（双引号字符串中只需转义闭合的双引号），正确代码：

echo 
    "<div onclick=\"openNav(" . strval($ind) . ")\" style=\"cursor:pointer\" class = \"item\"> <img src=\"images/" . $row["picture"] . 
    "\" alt=\"product\" title=\"product\">" . $row["price"]  . 
    "  " . $row["title"] . " " . strval($ind) . "</div><br>";

这个错误会导致HTML中onclick属性的引号不闭合，函数完全无法触发。

2. 统一Overlay的显示/隐藏逻辑 #

openNav()设置height: 100%，但closeProdOverlay()设置width: 0%，和CSS初始状态（width:0、height:0%）不匹配，导致显示逻辑混乱。改成统一设置宽高：

function openNav(itemNum){
    document.getElementById("prodOverlay").style.width = "100%";
    document.getElementById("prodOverlay").style.height = "100%";
    document.getElementById("disItemNum").innerHTML = itemNum;
}
function closeProdOverlay() {
    document.getElementById("prodOverlay").style.width = "0";
    document.getElementById("prodOverlay").style.height = "0%";
}

如果是全屏弹窗，同时设置宽高为100%能确保覆盖整个屏幕，避免显示不全。

3. 修复SQL查询的字段引用错误 #

SQL语句中'item number'是字符串常量，不是字段名，导致无法正确读取商品编号，改成反引号包裹字段名（因字段名含空格）：

$sql = "SELECT `item number`, title, description, picture, price FROM products";

这个错误不影响弹窗显示，但会导致后续无法正确获取商品编号数据。

4. 额外优化建议 #

• 将JavaScript代码放到</body>闭合标签前，确保DOM元素加载完成后再绑定函数
• 给Overlay添加display: flex属性，优化内容居中逻辑，避免错位
• 检查images/文件夹路径和图片文件名，确保图片能正常加载

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