动态jQuery对话框弹出窗口 [英] Dynamic jquery dialog pop ups

问题描述

我只使用了已知数量的JQuery对话框，并且在使用动态版本时遇到了种种麻烦.希望有人可以帮助我.这是我用已知号码进行的操作:

I have only worked with a known number of JQuery dialogs and are having all sorts of trouble getting a dynamic version working. Hopefully someone can help me with this. here is how I do it with a known number:

$( "#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中的类.帮助将不胜感激.谢谢

I would like to place both the anchor tag and the div tag inside a loop (Classic ASP) and obviously dynamically name both the ID in the anchor tag and the class in the div. Help would be very much appreciated. Thanking you

推荐答案

您可以使用a标记的href属性选择要打开的对话框.
这是其他jQuery UI模块(如tabs模块)应用的模式.

You could use the href attribute of the a tag to select the dialog to open.
This is a pattern applied by other jQuery UI modules like the tabs module.

它使您可以为一个对话框拥有多个链接，并以一种非常易读的方式链接到对话框内容.

It allows you to have multiple links for one dialog and a very readable way to link to the dialog content.

查看运行中的代码 jsfiddle

See the code in action 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>

这篇关于动态jQuery对话框弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！