模态卡片复制后无法修改差异化HTML内容求助

先修复HTML结构错误 #

第一个booking-container里的modal-title部分嵌套了重复的<h3>标签，这会导致DOM结构混乱，先修正：

<!-- 修正后的第一个container的modal部分 -->
<div class="booking-container">
    <div class="airplane">
        <img class="modalBtn" src="/images/travel photos/airplane.png" alt="airplane">
    </div>
    <div class="modal" >
        <div class="modal-content">
            <img src="/images/travel photos/airplane.png" alt="airplane">
            <h3>
                <a class="modal-title" href="#">
                    flight booking
                </a>
            </h3>
            <p>
                <a class="modal-text" href="#">
                    Lorem Ipsum is simply dummy text of the 
                    printing and typesetting industry. Lorem.
                </a>
            </p>
        </div>
    </div>
</div>

重写JavaScript逻辑（main.js） #

问题核心是你的JS代码大概率没有为每个按钮绑定对应的Modal，而是统一操作了同一个元素。下面是两种可行方案：

方案1：利用DOM层级关联（推荐）

每个modalBtn和对应的modal都在同一个booking-container下，通过父元素定位目标Modal：

// 获取所有触发按钮
const modalBtns = document.querySelectorAll('.modalBtn');

modalBtns.forEach(btn => {
    btn.addEventListener('click', function() {
        // 找到当前按钮所属的容器，再定位里面的Modal
        const container = this.closest('.booking-container');
        const targetModal = container.querySelector('.modal');
        
        // 显示Modal（这里用行内样式，也可以用CSS类控制，比如添加active类）
        targetModal.style.display = 'block';
    });
});

// 添加Modal关闭逻辑（点击Modal空白区域关闭）
document.querySelectorAll('.modal').forEach(modal => {
    modal.addEventListener('click', function(e) {
        if (e.target === this) {
            this.style.display = 'none';
        }
    });
});

方案2：用data属性绑定按钮与Modal

给每个按钮和对应Modal添加匹配的data-modal-id属性：

<!-- 按钮添加data属性 -->
<img class="modalBtn" data-modal-id="modal1" src="/images/travel photos/airplane.png" alt="airplane">
<!-- 对应Modal添加相同的data属性 -->
<div class="modal" data-modal-id="modal1" >

然后JS中通过属性匹配定位：

const modalBtns = document.querySelectorAll('.modalBtn');

modalBtns.forEach(btn => {
    btn.addEventListener('click', function() {
        const modalId = this.dataset.modalId;
        const targetModal = document.querySelector(`.modal[data-modal-id="${modalId}"]`);
        targetModal.style.display = 'block';
    });
});

// 关闭逻辑同上
document.querySelectorAll('.modal').forEach(modal => {
    modal.addEventListener('click', function(e) {
        if (e.target === this) {
            this.style.display = 'none';
        }
    });
});

自定义每个Modal的内容 #

现在你可以直接修改每个booking-container里的modal-content内容了——比如更换图片、修改标题文本、替换描述内容，每个Modal会根据绑定的按钮显示对应的自定义内容。

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