页面上有多个模态框

编辑

我已经更新了这个问题中的所有代码。

问题

我一直在尝试让多个模态框在一个页面上工作。

我可以让一个工作，但我不能复制它，这样两个就会打开（我希望最后有三个模态框？

这是被调用来打开第一个模态的按钮；

    <button id="myHistoryBtn" class="myAboutBtn">more</button>

这是第二个；

<button id="myAboutBtn" class="myAboutBtn">more</button>

这是我使用的模态结构

<div id="myHistoryModal" class="modal">
    <!-- Modal content -->
    <div class="modal-container">
            <div class="modal-content">
                <span class="modalclose">×</span>
                <h1>sstory</h1>
            </div>
    </div>
</div>

这是的第二个

<div id="myAboutModal" class="modal2">
          <!-- Modal content -->
        <div class="modal-container">
              <div class="modal-content">
                <span class="Aboutclose" id="close">×</span>
                <h1>AAAAAstory</h1>
              </div>
        </div>
        </div>

这就是让一切正常工作的JavaScript。

         // Get the modal
var modal = document.getElementById('myHistoryModal');
// Get the button that opens the modal
var btn = document.getElementById("myHistoryBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("modalclose")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
        main.style.display = "none";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
        main.style.display = "flex";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
                main.style.display = "flex";
    }
}

下面是让其他模态框工作的JavaScript。

// Get the modal
var about = document.getElementById('myAboutModal');
// Get the button that opens the modal
var Abtn = document.getElementById("myAboutBtn");
// Get the <span> element that closes the modal
var Aspan = document.getElementById("close")[0];
// When the user clicks the button, open the modal
Abtn.onclick = function(event) {
    about.style.display = "block";
        main.style.display = "none";
}
// When the user clicks on <span> (x), close the modal
Aspan.onclick = function() {
    about.style.display = "none";
    main.style.display = "flex";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function() {
    if (event.target == about) {
        about.style.display = "none";
                main.style.display = "flex";
    }
}   

我想我快疯了，因为现在一切都开始混乱起来了。一旦我尝试有一个以上的模式框它。

我又试了一次，我有点让它工作了（有点）

其中一个模式框在我点击按钮时出现，但在关闭时不会消失（只是停留在那里）

当我单击其他模式框按钮时，它会隐藏内容，但不显示模式框？

这是我正在做的工作的链接。我已经拿出了使其他模态框工作的代码，向你展示当你点击更多按钮时会发生什么。

http://www.periodictablesearch.zackreid.com/pages/Carbon.html

这让我现在很困惑。我已经重命名了第二组JavaScript上的所有内容，使第二个按钮可以工作，但仍然没有。

编辑

所以我现在让它们出现了，但其中一个仍然有点坏。

http://www.periodictablesearch.zackreid.com/pages/Carbon.html

然后出现第二个模态框，但它不会隐藏/关闭。当我们在模态框外点击按钮时，它完成了。

编辑

我现在已经获得了在点击窗口时关闭的第二个模态。只需要让按钮工作吗？有人感兴趣吗？我应该更新我的代码吗？