Javascript函数调用会产生意外的奇怪结果。

我正在使用

nodejs

和

socket.io

我有一个

board.html

文件，里面有棋盘、聊天框和游戏统计信息。电路板有三层：第一层是电路板画布（

z-index:0

）、典当画布（

z-index:1

）和（最初隐藏，

z-index:2

）

iframe

，当有东西要向用户显示时会弹出一个窗口

我在

board.html

文件中添加了一个按钮[show card]，并制作了一个

modal.html

文件，其中只包含modal。每当用户单击该按钮时，就会调用

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上有代码（让我现在提交并推送）

---

请随意提出编辑建议。如果有任何不清楚的地方，请进行注释。

当您第二次调用

showCard（）

时，它的执行非常正常：iframe显示并加载modal.html，但是您的modal的div带有

id=“myModal”

（来自modal2.html中的GitHub代码）仍处于隐藏状态，因此不显示任何内容：

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

---

最好的解决方案（我认为）是使用

id=“cardframe”

只隐藏和显示iframe，我从我的项目中删除了

modal2.html

，但同样的问题@SrujanBarai这不是问题，兄弟！问题是iframe打开了，但是模态没有显示。这是因为它是隐藏的css第一次关闭它。您的

div

（带有

id=“myModal”

）是隐藏的，因此当您使用

showCard（）

重新打开iframe时，不会显示任何内容。因此，与其隐藏模态，不如隐藏显示模态的iframe。如果你仍然不明白我说的话，我可以做一个plnkr的例子。明白了。我会尝试一下，我忘了说，我以前也试过。但该框架似乎无法从我的modal.html页面访问。我的框架是透明的，但我可以看到它的边界。如果我从modal.html文件中隐藏它，边框仍然可见，这意味着它仍然存在。这似乎是一个可访问性问题。不确定这对JS是否像对JAVA.Hmm一样正确……您应该尝试将

iframe

放在应用程序的主文件中，以便从那里控制它。或者，考虑在HTML页面中包含你的模式，在那里它应该弹出。然后您可以使用js轻松地

隐藏

和

显示

。