第二个模态按钮不起作用

Question

我的第二个，第三个按钮打开模态，不起作用，我无法弄清楚问题。

我认为我的javascript代码中存在逻辑问题，但我无法找到解决问题的方法......也许你可以帮助我。

var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal
var img = document.getElementById('myImg');
var modalImg = document.getElementById('img01');
var buton = document.getElementById('continut');

buton.onclick = function() {
    modal.style.display = "block";
    modalImg.src = img.src;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

//When the user clicks on <span> (X), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

你有关于jsfiddle的演示

提前致谢！

https://jsfiddle.net/qschptk9/1/

我有2张反对票，没有一张帮我。

好的我已经更改了ID，但仍然无效，因为getElementsByClassName返回一个元素数组......

Answer 1

id应该是唯一的，因此您不应该将它用于2个元素 对于许多元素你使用相同的id 2次（按钮，模态，img，modalimg） 您可以更改所有这些元素的ID（硬编码选项），或者您可以为两者添加一个类并为两者添加点击事件，但您需要区分每个模态和每个img（您可以通过在函数中传递这些元素的id）

修改

这是我想用的优化解决方案

我只添加了一个模态，并为每个按钮使用了onclick事件，将标题文本和img id传递给显示相应模式的函数 这是HTML

<div class="portfolio_content">
    <div class="row" id="portfolio">
        <div class="col-xs-12 col-sm-4 websites responsive webDesign">
            <div class="portfolio_single_content">
                <img id="myImg1" src="http://www.w3schools.com/css/img_fjords.jpg" alt="title" />
                <div>
                    <!--Continut because from here we access the content of this preview photo-->
                    <div class="continut">
                        <p>Portfolio Website</p>
                        <button class="seeBtn" onclick="showModal('Portfolio Website','myImg1')">
                            button
                        </button>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-4 appsDevelopment">
            <div class="portfolio_single_content">
                <img id="myImg2" src="http://www.w3schools.com/css/img_fjords.jpg" alt="title" />
                <div>
                    <!--Continut because from here we access the content of this preview photo-->
                    <div class="continut">
                        <p>Pomodoro Clock</p>
                        <button class="seeBtn" onclick="showModal('Pomodoro Clock','myImg2')">
                            button
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<!--The modal-->
<div class="modal" id="myModal">
    <!-- Modal content -->
    <div class="modal-content">
        <!--Modal header-->
        <div class="modal-header">
            <span class="close" id="close">CLOSE X<i class="fa fa-times" aria-hidden="true"></i></span>
            <h2 id="modal_h1"></h2>
        </div>
        <div class="modal-body">
            <img class="modal-image" id="img01">
        </div>
        <div class="modal-footer">
            <h3>External <a href="" target="_blank">link</a></h3>
        </div>

    </div>
</div>

这里是js代码

var modal = document.getElementById('myModal');
var modalImg = document.getElementById('img01');
var modalHeaderTxt = document.getElementById('modal_h1');

function showModal(header_txt,img_id){
    // Get the image and insert it inside the modal
    var img = document.getElementById(img_id);
    modalImg.src = img.src;
    modalHeaderTxt.innerHTML = header_txt;
    modal.style.display = "block";

}
// Get the <span> element that closes the modal
var span = document.getElementById("close");

//When the user clicks on <span> (X), close the modal
span.onclick = function() {
  modal.style.display = "none";
} 

Demo

这是硬编码选项（我不推荐）

var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');
// Get the image and insert it inside the modal
var img = document.getElementById('myImg');
var img2 = document.getElementById('myImg');
var modalImg = document.getElementById('img01');
var modalImg2 = document.getElementById('img02');
var buton = document.getElementById('continut');
var buton2 = document.getElementById('continut2');

buton.onclick = function() {
  modal.style.display = "block";
  modalImg.src = img.src;
}
buton2.onclick = function() {
  modal2.style.display = "block";
  modalImg2.src = img2.src;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close")[1];

//When the user clicks on <span> (X), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
span2.onclick = function() {
  modal2.style.display = "none";
}

Demo

Answer 2

您需要将模型的ID更改为类。您无法在HTML中分配多个ID。这就是为什么你的代码只适用于一种模式的原因。

将您的ID更改为以下类：

 <div class="modal myModal">

Answer 3

你有两个同名的id，因此每次都会选择第一个id。 ID必须是唯一的。请尝试更改ID，它应该工作。 或者您可以尝试将其更改为类名，然后使用类

Answer 4

我认为您有多个拥有element的{​​{1}} ，在这种情况下，您应该这样做：

id='myModal'

示例： document.getElementById（'myModal'）[0] //第一个元素 document.getElementById（'myModal'）[1] //第二个元素 等等... 每个按钮