第二个模态按钮不起作用

second modal button doesn't work

本文关键字：不起作用 按钮 模态 第二个      更新时间：2023-09-26

我的第二个，第三个等按钮打开模式，不工作，我无法找出问题。

我认为是一个逻辑问题在我的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张反对票，没有人帮助我。

Ok，我已经改变了ID，但仍然不起作用，因为getElementsByClassName返回元素数组…

id应该是唯一的，所以你不应该在两个元素中使用它你对许多元素(button, modal, img, modalimg)使用相同的id 2次。你可以改变所有这些元素的id(硬编码选项)，或者你可以为它们添加一个类，并为它们添加click event，但你需要区分每个模态和每个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";
}
演示

您有两个具有相同名称的id，因此每次都会选择第一个id。id不能重复。请尝试更改id，它应该工作。或者你也可以把它改成类名然后使用

您需要将模型的id更改为类。你不能在HTML中分配多个id。这就是为什么你的代码只适用于一个模态。

把你的id改成这样的类:

 <div class="modal myModal">

我想你有不止一个element有id='myModal'，在这种情况下，你应该这样做:

var modal = document.getElementById('myModal')[correct element number]

的例子:document.getElementById('myModal')[0] //第一个元素document.getElementById('myModal')[1] //第二个元素等等......对于每个按钮

相关文章：