SimpleModal - 在一页上使用多个链接来打开具有不同内容的模式

Question

我正在开发一个牙科诊所网站。有一个员工页面，其中包含各个员工的缩略图。我想设计该页面，以便当我单击某个员工时，会显示有关他们及其资格的信息。显然每个员工都有不同的个人资料，所以我该如何去做呢？

我花了很长时间摆弄 DIV ID 和 basic.js 文件，但没有成功。

非常感谢

编辑（当前使用的技术）： 简单模态

Answer 1

以下答案可能会引导您走向正确的方向：

使用简单模态 OSX 样式对话框进行多次调用

您需要使用员工信息创建单独的 div，然后使用我提供的链接中的 JS 示例，以编程方式将缩略图链接与员工信息 div 进行匹配。

如果您需要任何补充说明，请告诉我。

更新：此答案适用于使用 SimpleModal 的解决方案

Answer 2

编辑此答案是为了使用 JQuery 和JQuery-UI

首先我将指出我们将用来创建对话框的工具：
http://jqueryui.com/demos/dialog/

接下来是一些帮助函数，让您的生活更轻松：

$(function(){
    $(".jqy-modal").each(function () {
        $(this).dialog({ autoOpen: false, width: "925px", modal: true, title: $(this).attr("data") });
    });

    $(".auto-wire-dialog").click(function () {
        $("#" + $(this).attr("data")).dialog("open");
    });
});

接下来让我们介绍一下您的 html 的外观：

<a href="#" class="auto-wire-dialog" data="JimBobProfile">Dr. Jim Bob</a>

<div id="JimBobProfile" class="jqy-modal" data="Dr Jim Bob">
    <!-- Info here!!! -->
</div>

最后理解这个概念：

自动连线对话框的类可以放在任何可点击的元素上。单击该元素时，它将打开关联的对话框，其 ID 在 data="..." 属性中指定。

jqy-modal 的类只能放在 div 标签上。这就是创建模态/对话框窗口的原因。您可以在其上放置一个数据元素来指定标题！

您可以为每个人、触发对话框的元素以及对话框本身执行此操作，对话框本身将被隐藏，直到被触发。