我正在这里开发一个小型网站(刚开始使用 Zurb Foundation)并制作了一个基本的网格布局，其中包含大型 metro 风格 div 缩略图(页面上约有 10 个缩略图)。
我希望在此处为用户添加交互，即当用户单击这些缩略图中的任何一个时，会出现一个模式窗口，显示有关所单击的特定元素的更多信息。 (有点类似于我们有大量可用的图库灯箱插件)
但是，我想知道从以下两个方面实现相同目标的更好方法是什么。我的模式弹出对话框的内容是否应该在单独的 html 中，我应该在用户点击时通过 ajax 获取它们？
或者我应该只隐藏这些部分并在用户点击时显示它们吗？
每个部分类似于一个元素名称，点击它显示元素描述(不同的元素可能有视频、图像、描述等)
无论上面的方法是什么更好的方法，最好查看一个关于如何显示模式弹出窗口的示例(考虑到它应该最好应用于所有缩略图而不是做为每个缩略图单独处理)
最佳答案
最好的方法是将这些对话放在一个单独的文件中，并在用户单击某些内容时通过 ajax 加载它们。这将使事情更容易管理，并且它们将更有条理。
如果您将 html 存储在隐藏的 div 中，这可能会浪费资源，因为用户不会使用该页面加载中的所有对话。您可能还很难使代码保持最新，因为您必须在隐藏的 div 部分更新代码，然后在外部文件部分更新代码(如果同时使用两者)。
我的建议是将所有 html 放在一个 php 类/函数中(或使用 php MVC 框架)，并在需要时从那里加载它。这样您只需要从一个地方更新它就可以在整个站点上进行更改。对于 AJAX 加载，加载 JSON 格式的 html，然后您可以在 JSON 中添加其他变量(这将使代码更有条理)，例如外部脚本和 CSS 文件以及状态指示器。
关于javascript - 显示带有 HTML 内容的模态窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17263756/