动态jquery对话框弹出窗口

Question

我只使用过固定数量的JQuery对话框，现在想要实现一个动态版本，但无论怎样尝试都遇到了各种问题。希望有人能够帮忙。以下是我在已知数量时如何实现：

$( "#opener1" ).click(function() {
    $( "#dialog1" ).dialog( "open" );
    $( "#dialog1" ).height(200);
    return false;
});

$( "#dialog1" ).dialog({
    autoOpen: false,
    show: "fold",
    hide: "explode",
    width: 600,
    height: 200,
    buttons: {
        Close: function() {
            $( this ).dialog( "close" );
        }
    }
});

然后我执行这个操作：

<A HREF='' ID='opener1'>Text to open</a>

<div class="dialog1"> content here </div>

我想将锚点标签和div标签都放在一个循环内（经典ASP），并且动态命名锚点标签中的ID和div中的类。非常感谢您的帮助。谢谢。

- Mat41

Answer 1

你可以使用 a 标签的 href 属性来选择要打开的对话框。
这是其他 jQuery UI 模块（如选项卡模块）应用的一种模式。
它允许您为一个对话框拥有多个链接，并以非常可读的方式链接到对话框内容。
在这里查看代码示例：jsfiddle
javascript

jQuery(function ($) {
  $(".dialog-opener").click(function () {
    $($(this).attr('href')).dialog({
        show: "fold",
        hide: "explode",
        width: 600,
        height: 200,
        buttons: {
            Close: function () {
                $(this).dialog("close");
            }
        }
    });
    return false;
  }); 
});

html

<a href='#dialog1' class="dialog-opener">Text to open 1</a>
<a href='#dialog1' class="dialog-opener">Text to open 1</a>
<a href='#dialog2' class="dialog-opener">Text to open 2</a>

<div id="dialog1">Dialog 1</div>
<div id="dialog2">Dialog 2</div>

- jantimon