如何通过单个函数控制打开不同的lightbox模态框

问题原因 #

你当前的代码有两个核心问题导致多模态框同时触发：

• openModal函数硬编码了同时显示myModal和myModal1两个模态框，没有做参数区分
• showSlides函数全局选取所有mySlides、demo类元素，会把两个图库的内容混在一起统计，同时页面存在重复的captionid，不符合DOM规范

实现思路合理性说明 #

单脚本内通过参数控制指定模态框打开的思路完全合理，不需要重复引入多份相同脚本，后期维护成本更低，性能开销也更小。

修改后的可运行代码 #

HTML调整部分 #

<div id="epo20-23">
    <div class="row">
        <div class="whole-gallery">
            <!-- 调用openModal时传入当前要打开的模态框ID、对应caption ID -->
            <h2 style="text-align:center;" onclick="openModal('myModal','caption1');currentSlide(1)" class="hover-shadow cursor">gallery
            </h2>
        </div>
    </div>
    <div id="myModal" class="modal">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="modal-content">
            <div class="mySlides">
                <div class="numbertext">1 / 2</div>
                <img src="image1.jpg" style="width:100%">
            </div>
            <div class="mySlides">
                <div class="numbertext">2 / 2</div>
                <img src="image2.jpg" style="width:100%">
            </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
            <div class="caption-container">
                <!-- 改唯一ID -->
                <p id="caption1"></p>
            </div>
            <div class="column-container">
                <div class="column">
                    <img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)">
                </div>
                <div class="column">
                    <img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)">
                </div>
            </div>
        </div>
    </div>
</div>
<div id="epo24-38">
    <div class="row">
        <div class="whole-gallery">
            <!-- 调用openModal时传入当前要打开的模态框ID、对应caption ID -->
            <h2 style="text-align:center;" onclick="openModal('myModal1','caption2');currentSlide(1)" class="hover-shadow cursor">gallery
            </h2>
        </div>
    </div>
    <div id="myModal1" class="modal">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="modal-content">
            <div class="mySlides">
                <div class="numbertext">1 / 2</div>
                <img src="image3.jpg" style="width:100%">
            </div>
            <div class="mySlides">
                <div class="numbertext">2 / 2</div>
                <img src="image4.jpg" style="width:100%">
            </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
            <div class="caption-container">
                <!-- 改唯一ID -->
                <p id="caption2"></p>
            </div>
            <div class="column-container">
                <div class="column">
                    <img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(1)"
                        alt="img3">
                </div>
                <div class="column">
                    <img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(2)"
                        alt="img4">
                </div>
            </div>
        </div>
    </div>
</div>

JS调整部分 #

// 存储当前激活的模态框ID、对应caption ID
let activeModalId = ''
let activeCaptionId = ''
var slideIndex = 1;

function openModal(modalId, captionId) {
    activeModalId = modalId
    activeCaptionId = captionId
    document.getElementById(modalId).style.display = "block";
}

function closeModal() {
    document.getElementById(activeModalId).style.display = "none";
    activeModalId = ''
    activeCaptionId = ''
}

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    // 只在当前激活的模态框里找元素，不全局搜索
    const activeModal = document.getElementById(activeModalId)
    var slides = activeModal.getElementsByClassName("mySlides");
    var dots = activeModal.getElementsByClassName("demo");
    var captionText = document.getElementById(activeCaptionId);
    if (n > slides.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = slides.length }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
    captionText.innerHTML = dots[slideIndex - 1].alt;
}

扩展说明 #

如果后续要新增更多灯箱图库，只需要按照现有规则给新模态框设置唯一ID，对应caption设置唯一ID，调用openModal时传入对应参数即可，不需要修改核心逻辑。

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