Question

好的，我正在设计一个杂志的网站，下面的功能是打开一个模式，用户可以在其中查看所选的作品。我遇到了一些麻烦，因为我想在同一个文件中多次使用这个脚本。我觉得有一个简单的答案，因为我试图重命名变量等，但它没有奏效。显然它不会一遍又一遍地工作c + p'd，所以我只是想找一种方法来分别调整它。谢谢！

HTML是一个基本的模态形式，下面有相应的变量，但是我在这里遇到了一些麻烦，所以这里有一个截图：http://prntscr.com/dugugw

以下是脚本......

function = modal(); {
    // Split Ends 
    // Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

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

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
}

Answer 1

为要打开模态的所有按钮添加一个类。然后将on click事件处理程序添加到所有按钮。

<button type="button" class="modal-button" ....

// Get the buttons that opens the modal
var btns = document.getElementsByClass("modal-button");

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

// When the user clicks on the button, open the modal 
btns.onclick = function() {
    modal.style.display = "block";
}

使用相同的脚本打开模态

1 个答案: