Question

修改

我已更新此问题中的所有代码。

问题

我一直试图获得多个模态框来处理单个页面。

我可以让一个人上班，但我无法复制它，以便两个人打开（我希望最后有三个模态盒？

这是调用打开第一个模态的按钮;

    <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

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

修改

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

Answer 1

您可能需要将第二个框的名称更改为

var myAboutModal = document.getElementById('myAboutModal');
var myAboutBtn = document.getElementById("myAboutsBtn");

并将onclick注册到myAboutBtn，如：

myAboutBtn.onclick = function() {
  myAboutModal.style.display = "block";
  main.style.display = "none";
}

否则最终会导致第一个btn和modal变量

混乱

与span变量相同。顺便说一下，跨度可能需要使用id而不是类名，因为getElementsByClassName("close")[0];始终是文档中的第一个跨度，可能永远不会为您提供第二个模式所需的第二个跨度< / p>

对于关闭btn，您可以向所有关闭按钮添加事件侦听器，而无需逐个添加它们

var closeBtns = document.getElementsByClassName("modalclose");
for(var i=0; i< closeBtns.length; i++) {
   closeBtns[i].onclick = function() {
       modal.style.display = "none";
       about.style.display = "none";
   }
}

要在其外部单击时关闭模态，您需要检查目标是否不是任何模态，而不是触发模式按钮，而不是modal-container，而不是modal-content而不是modal-content window.onclick = function(event) { if (event.target != modal && event.target != about && event.target != btn && event.target != Abtn && event.target.className != "modal-container" && event.target.className != "modal-content" && event.target.parentNode.className != "modal-content") { modal.style.display = "none"; about.style.display = "none"; } }

内的内容

main.style.display = "flex"

我不确定您要对main做什么。在大多数情况下，假设main是html <body>

，则无需为pip设置任何样式

工作的jsfiddle在这里https://jsfiddle.net/yg88rvgq/1/

页面上有多个模态框？

1 个答案: