具有不同内容的 JQuery 可重用对话框

Question

我是 JQuery 新手，无法创建可重用的对话框。这是我的代码

    $(function () {
    $("#baseDialog").dialog({
        autoOpen: false,
        modal: true,
        width: 520,
        show: "blind",
        hide: "explode"
    });
    $("#baseDialogOpener").click(function () {
        $("#baseDialog").dialog("open");
        return false;
    });

我是这样使用这个对话框的：

<input id="baseDialogOpener" type="button" value="Update" />
    <div id="baseDialog" title="Test Dialog" class="divClass">
    <!-- here goes some ASP .NET MVC 2 code -->
    </div>

问题是我想在许多页面中多次重用此对话框，但使用不同的 html 内容，我不知道该怎么做，因为我也需要使用样式，所以我不能使用 class 属性.我不能在同一页面上使用具有相同值的 id 属性。 我没有办法像这样使用它吗？可能具有除 id 之外的其他属性（类为 css 保留）？
<input id="baseDialogOpener" type="button" value="Update" />
<div id="baseDialog" title="Test Dialog" class="divClass">
<form>...</form>
</div>
<input id="baseDialogOpener" type="button" value="Update 2" />
<div id="baseDialog" title="Test Dialog 2" class="divClass">
<form>...</form>
</div>
期待您的回答。
更新：我使用类属性执行了上面的代码，但是当我单击按钮时，所有对话框都会立即出现。有什么办法解决这个问题？

Answer 1

对话框在打开时可以从服务器加载 .htm 文件中的内容。

你可以使用这样的东西：

$("#baseDialogOpener").click(function () {
    $("#baseDialog").load('content.htm');
    return false;
});

更新：这段代码展示了如何让相同的 .click() 根据按钮显示不同的内容。

$("dialogButton.").click(function () {
    $("#baseDialog").load($(this).data('content'));
    return false;
});


<input type="button" value="first" id="button1" class="dialogButton" data-content="content1.htm" />
<input type="button" value="second" id="button2" class="dialogButton" data-content="content2.htm" />

Answer 2

您可以使用多个class 代替您的id。

例如，而不是：

<div id="baseDialog" title="Test Dialog" class="divClass">

使用

<div title="Test Dialog" class="divClass baseDialog">

然后你可以在你的javascript中引用它：

你在哪里

$("#baseDialogOpener").click(function () {
        $("#baseDialog").dialog("open");
        return false;
    });

试试

$(".baseDialogOpener").click(function () {
        $(this).children(".baseDialog").dialog("open");
        return false;
    });

$(this) 只抓取点击的内容，因此您可以拥有多个相同类型的类。