Question

我正在使用nodejs和socket.io

开发棋盘游戏

我有一个board.html文件，其中有一个棋盘，聊天框和游戏统计信息。棋盘有三层第一层是棋盘画布（z-index:0），pawn的画布（z-index:1）和（最初隐藏的，z-index:2）iframe弹出一个{{3}当有东西要显示给用户时。

我在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 modal上有代码（让我现在提交并推送），以防万一有人想看看它。

随意建议编辑。评论是否有任何不清楚的地方。

Answer 1

当您第二次拨打showCard()时，它会执行得很好： iframe 显示并且 modal.html 已加载，但您的模态＆＃ 39; s div 与id="myModal"（来自modal2.html中的GitHub代码）仍然隐藏，因此不会显示任何内容：

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

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

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

1 个答案: