如何实现点击卡片时打开显示产品信息的modal窗口？

现有如下产品卡片HTML结构：

<div class="card">
    <div class="imgBox">
        <img src="./img/bau.png" alt="Produto" class="mouse">
    </div>
    <div class="contentBox">
        <h3>Plugin</h3>
        <h2 class="price">25.<small>00</small> BRL</h2>
        <a href="#" class="buy">Comprar Agora!</a>
    </div>
</div>

请问如何实现点击该卡片时，打开一个展示产品相关信息的modal窗口？

要实现点击卡片弹出模态框，按以下三步操作即可：

1. 新增模态框HTML结构 #

在页面的</body>标签前添加模态框的结构，包含全屏遮罩层和内容展示区：

<!-- 模态框遮罩层 -->
<div class="modal-overlay" id="modalOverlay">
    <!-- 模态框内容区 -->
    <div class="modal-content">
        <h2>Plugin详情</h2>
        <p>这是一款功能强大的插件，支持自定义配置，适配多种使用场景。</p>
        <p>售价：25.00 BRL</p>
        <!-- 关闭按钮 -->
        <button class="close-modal">关闭</button>
    </div>
</div>

2. 编写CSS样式 #

给卡片、模态框添加基础样式，确保模态框默认隐藏，点击后正常显示：

/* 卡片样式：添加上手型光标，提示用户可点击 */
.card {
    cursor: pointer;
    /* 可保留你原有的卡片样式，比如边框、内边距等 */
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 8px;
    width: 200px;
}

/* 模态框遮罩层：默认隐藏，全屏覆盖，半透明背景 */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 让内容居中 */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* 模态框内容区：白色背景，固定宽度 */
.modal-content {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    width: 300px;
    text-align: center;
}

/* 关闭按钮样式 */
.close-modal {
    margin-top: 15px;
    padding: 8px 16px;
    background-color: #ddd;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.close-modal:hover {
    background-color: #ccc;
}

3. 添加JavaScript交互逻辑 #

绑定点击事件，控制模态框的显示与隐藏：

// 获取页面元素
const card = document.querySelector('.card');
const modalOverlay = document.getElementById('modalOverlay');
const closeBtn = document.querySelector('.close-modal');

// 点击卡片显示模态框
card.addEventListener('click', function() {
    modalOverlay.style.display = 'flex';
});

// 点击关闭按钮隐藏模态框
closeBtn.addEventListener('click', function() {
    modalOverlay.style.display = 'none';
});

// 点击遮罩层空白处也关闭模态框
modalOverlay.addEventListener('click', function(e) {
    if (e.target === modalOverlay) {
        modalOverlay.style.display = 'none';
    }
});

额外说明 #

• 你可以根据需求修改模态框内的内容，比如添加产品图片、更多参数介绍等。
• 如果页面有多个产品卡片，只需给每个卡片添加data-modal-id这类标识，再修改JS逻辑，就能实现不同卡片对应不同的模态框内容。

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