JavaScript函数呼叫给出意外的怪异结果

Question

我正在使用nodejs和socket.io

开发棋盘游戏

我有一个board.html文件，其中有一个板，聊天框和游戏统计数据。木板首先有三层是木板帆布（z-index:0），Pawn's Canvas（z-index:1）和（最初隐藏，z-index:2）iframe，当有一些东西向用户展示时，它会弹出模态。

我在 board.html文件中添加了一个按钮[显示卡]，并制作了一个仅包含模态的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上有代码（如果有人想看看它，让我立即提交并立即推动）。

随时建议您进行编辑。如果有什么不清楚的话。

Answer 1

第二次调用showCard()时，它的执行情况还不错： IFRAME 显示，并且 modal.html 已加载，加载，加载，但是您的模态的div 带有 id="myModal"（来自modal2.html中的github代码）仍然被隐藏，因此没有显示任何内容：

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

最好的解决方案（我认为）是用id="cardframe"隐藏并仅显示 iframe 。