如何防止模态多次被绘制？

Question

这比我认为违背事物精神的常见问题更抽象,但我希望我仍能得到很好的回应.

这是问题所在.我们有一个用PHP编写的相当复杂的Web应用程序.目的是相对不重要的,但简单地说:我们使用Comet/AJAX/JSON/JavaScript/PHP/MySQL(没有jQuery,但只有原生JavaScript)来呈现实时显示数据的控件.在整个应用程序中,我们使用本机JavaScript呈现弹出模式.这是一个相当复杂的逻辑,它测试页面上是否存在具有相同名称的模态,并阻止创建相同名称的新版本,当然,一旦创建,就会创建一个图层以防止与下面的链接进行交互.

问题是我们至少有一个模式在页面呈现之前可以多次调用,因为AJAX调用从数据库中收集数据并将其组装以进行呈现所需的时间.如果用户在所述链接上"双击",则将呈现两个模态,一个在另一个上面.我已经能够实际渲染8-10个.与最顶层模态的交互似乎被打破,因为用户实际上在最底部模态上影响可折叠标题.一旦开始关闭对话框并到达底部,您就可以看到您点击的位置.

所以,我的问题是:防止这种行为的最佳方法是什么？

我已经考虑过简单地向onClick事件添加一个函数,该函数会在第一次点击之后从链接中删除onClick属性(例如500ms).我还考虑过尝试实现可以​​计算点击次数的位测试逻辑,实际上只是在第一次点击后首先发生事件,并在模态关闭时重置.

我想知道的是,如果有人有任何想法或建议,甚至已经解决了类似的问题,并且在这种情况下对实现我的目标的最佳实践有一些了解.

非常感谢你.

Answer 1

在这种情况下，我发现最简单的解决方案是最好的，但我仍然希望听到其他反馈（如果有的话）。

在这种情况下，我发现操作顺序是问题所在。我正在等待 AJAX 响应来生成此模式的正文 html。我更改了顺序，改为立即<p>Loading...</p>在模态体内使用来创建模态。然后，当 AJAX 完成并且我有了新的正文文本时，我只是用一些简洁的代码将其注入模式的内容区域，鲍勃是你的叔叔，我们中了大奖。