如何使用一种功能选择不同的模态？答案

【问题标题】：How to select diferent modals with one function?如何使用一种功能选择不同的模态？
【发布时间】：2021-12-01 15:51:58
【问题描述】：

我尝试了W3 school 的灯箱，效果很好，但如果我在一页上有更多模式，脚本会一起打开所有模式。

是否可以在一个脚本中设置一些条件应该打开哪个模式？或者/并且这是思考如何编码的正确方式吗？

我从代码中省略了降低样式和大量其他内容以使其更短，但我没有对 W3 的原始脚本进行任何更改，除了将新行“myModal1”添加到函数 open/closeModal 这是我试图解决的问题。

非常感谢您的回答。 :)

<div id="epo20-23">
    <div class="row">
        <div class="whole-gallery">
            <h2 style="text-align:center;" onclick="openModal();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">
                <p id="caption"></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">
            <h2 style="text-align:center;" onclick="openModal();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">
                <p id="caption"></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>

<script>
    function openModal() {
        document.getElementById("myModal").style.display = "block";
        document.getElementById("myModal1").style.display = "block";
    }

    function closeModal() {
        document.getElementById("myModal").style.display = "none";
        document.getElementById("myModal1").style.display = "none";
    }

    var slideIndex = 1;
    showSlides(slideIndex);

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

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

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        var captionText = document.getElementById("caption");
        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;
    }
</script>

【问题讨论】：

标签： javascript html lightbox w3.js

【解决方案1】：

会根据你的代码回复

你有

function openModal() {
        document.getElementById("myModal").style.display = "block";
        document.getElementById("myModal1").style.display = "block";
    }

这将同时打开两个模态

有很多方法可以实现这个功能

一个非常非常基本的方法：您可以添加一个参数并在脚本中使用 if else-if 语句来指定要打开哪一个

例子：

<div id="epo20-23">
    <div class="row">
        <div class="whole-gallery">
            <h2 style="text-align:center;" onclick="openModal("myModal");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">
                <p id="caption"></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">
            <h2 style="text-align:center;" onclick="openModal("myModal1");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">
                <p id="caption"></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>

<script>
    function openModal(id) {
        if(id=="myModal")
            document.getElementById("myModal").style.display = "block";
        else if(id=="myModal1")
            document.getElementById("myModal1").style.display = "block";
    }

    function closeModal() {
        document.getElementById("myModal").style.display = "none";
        document.getElementById("myModal1").style.display = "none";
    }

    var slideIndex = 1;
    showSlides(slideIndex);

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

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

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        var captionText = document.getElementById("caption");
        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;
    }
</script>

如您所见：

在正文部分：

onclick="openModal("myModal");currentSlide(1)" //first h2 div
onclick="openModal("myModal1");currentSlide(1)" //second h2 div

脚本部分：

function openModal(modal) {
        if(modal=="myModal")
            document.getElementById("myModal").style.display = "block";
        else if(modal=="myModal1")
            document.getElementById("myModal1").style.display = "block";
    }

【讨论】：

谢谢，但这只是解决了部分问题。当我到达画廊的尽头并单击下一个按钮时，它不会让我回到第一张幻灯片，而是继续看画廊编号 2 的第一张幻灯片。