Question

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

我正在使用php生成页面。

我试图这样做，并使其部分工作，但我只能使页面上的第一个实例工作。请任何人都可以给我一个例子，因为UI页面上的那些不太有用，因为它们会在页面打开时自动弹出。

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

提前做出来。

Answer 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>

Answer 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>

Jquery对话 - 在同一页面上多个

2 个答案: