Jquery Dialogue - 同一页面上的多个答案

【问题标题】：Jquery Dialogue - Multiple on the same pageJquery Dialogue - 同一页面上的多个
【发布时间】：2009-04-07 13:53:04
【问题描述】：

我正在尝试在一个页面上多次实现 jquery 对话框 - 基本上，我想在用户单击其姓名时显示有关此人的更多信息。

我正在用 php 生成页面。

我已经尝试过这样做，并使其部分工作，但我只能使页面上的第一个实例工作。谁能给我举个例子，因为 UI 页面上的那些不是很有帮助，因为它们会在页面打开时自动弹出。

我没有发布我的代码，因为我认为这不是正确的做法。

提前谢谢。

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

您需要的所有信息都在 UI 文档页面的底部，位于标签为“选项”和“方法”的选项卡底部。这些人是你的朋友，他们会（几乎）告诉你小部件可以做的所有事情。例如，

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying
       information. The dialog window can be moved, resized and
       closed with the 'x' icon.</p>
</div>
...
<a href="" onclick="openDialog('Peter Smith', '<p>Peter Smith likes dirt bike riding, mountain climbing and punk music.</p>'); return false;">Peter Smith</a>
...
<script type="text/javascript">

    $(document).ready( function() {
       $("#dialog").dialog({ autoOpen: false, modal: true });
    });

   function openDialog(title, text) {
        $("#dialog").html(text).dialog('option','title',title).dialog('open');
   }
</script>

【讨论】：

嗨，Ajw，感谢您的回答，但上面缺少的一点是如何为不同的链接选择不同的文本位。据我所见，这将选择具有对话 id 的 div，并始终打开它
怎么样，Peter Smith

【解决方案2】：

以下应该是一个有效的例子。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 -->
<head>
  <meta http-equiv="Content-Type" content="application/text+html;utf-8"/>

  <title>Sandbox</title>

  <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" charset="utf-8" />
  <link rel="stylesheet" href="css/print.css" type="text/css" media="print" charset="utf-8" />
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<style type="text/css">

</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.3.2");
    google.load("jqueryui", "1.7.0");
</script>
<script type="text/javascript">
google.setOnLoadCallback(function() {

      $(document).ready(function() {
        $('.more-text').toggle();
        $('.more').click(function() {
            $(this).parent().next('p').dialog();
        })


    });
});
</script>
</head>
<body>
    <div id="container">
        <div id="person-1">
        <p>Short text for person one <a href="#" class="more">Show more</a></p>
        <p class="more-text">This is more of the text</p>
        </div>
        <div id="person-2">
        <p>Short text for person two <a href="#" class="more">Show more</a></p>
        <p class="more-text">This is more of the text with a longer description that
        is supposed to go into a popup</p>
        </div>
    </div>
</body>

</html>

【讨论】：

感谢您花时间完成 Steerpike 的所有工作。作为初学者，它看起来很棒，但尝试一下，对话只会在第一次被点击时弹出，我想我在某个地方读到了另一个关于这个的答案，我现在要搜索，但是有什么想法吗？
它只会触发一次，因为对话框在将其变为弹出窗口时会将标记从 DOM 中拉出。现在我在工作，没有时间研究这个问题。我知道这是可能的，但我已经使用与我发布的代码类似的代码在另一个项目中完成了您所需要的。
很遗憾，我目前无法访问我编写的代码。
实际上，是的，我愿意 - 它目前正在直播。您可以在juliesbicycle.com/about-us/who-we-are 找到它（查看源代码）
@Steerpike 解决方案仍然有效并为我解决了这个问题，链接现在是juliesbicycle.com/about-jb/who-we-are