Javascript 函数调用给出了意想不到的奇怪结果。

Question

我正在使用 nodejs 和 socket.io 开发棋盘游戏

我有一个 board.html 文件，其中包含棋盘、聊天框和游戏统计信息。棋盘有三层首先是棋盘 Canvas (z-index:0)，棋子的 Canvas (z-index:1)和(最初是隐藏的，z- index:2) iframe 弹出 modal当有东西要展示给用户时。

我在 board.html 文件中添加了一个按钮 [show card]，并制作了一个仅包含模式的 modal.html 文件。每当用户单击该按钮时，showCard() 函数就会被调用，并且 modal.html 文件会设置为弹出模式的 iframe。在我的 modal.html 文件中，我有一个代码，如果用户在模态之外单击，它会删除模态。到目前为止一切正常，现在我再次调用 showCard() 函数，当用户在模态外单击时模态被删除。

用户在模态框外点击时的代码。

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none"; //Removes the modal, works!
        showCard(); //After this call the function is being called but somehow the modal is not showing up again.
    }
};

问题:我预计模态框将被删除并再次显示。但不知何故，它只是被删除了。 showCard() 函数被调用，但模态框不再显示。

showCard() 函数:

function showCard(){
    document.getElementById("cardframe").style.display = "";
    document.getElementById("cardframe").src = "modal.html";
}

出于调试目的，我在 showCard() 函数的第一行添加了一条警告消息。现在，当我单击按钮时，首先显示警报，然后显示模式。然后，当我通过在模态外部单击取消模态时，再次显示警报(确认调用了 showCard() 函数)但模态未显示。

我真的不明白为什么同一段代码只显示一次模式而不是再次显示。

我在github上有代码here (让我现在提交并推送)如果有人想看的话。

随时提出修改建议。如果有任何不清楚的地方，请发表评论。

Answer 1

当您第二次调用 showCard() 时，它的执行非常正常:iframe 出现并加载了 modal.html ，但是你的模式的 div 和 id="myModal"(来自你在 modal2.html 中的 GitHub 代码)仍然是隐藏的，所以什么都不显示:

modal.style.display = "none"; //Removes the modal, works!

最好的解决方案(我认为)是使用 id="cardframe" 隐藏和仅显示 iframe。