JQuery reusable dialog with different content

I'm new to JQuery and I can't create reusable dialog box. Here is my code

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

I use this dialog box like this:

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

The problem is that I want to reuse this dialog many times in many pages but with different html content and I have no idea how to do this, because I can't use class attribute because of styles that I need to use too. I cant use id attrubutes with the same values at the same page. And there is no way I can use it like this? Maybe with another attribute than id (class is reserved for 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>

Looking forward to 开发者_如何转开发your answes.

UPDATE: I have the code above executed by using class attribute, but all dialogs appear at once when I click button. Any way to fix this?

The dialog box can load content from an .htm file from the server when it's opened.

You can use something like this :

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

UPDATE: This code shows how to have the same .click() display different contents based on the button.

$("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" />

You can use multiple class in place of your id.

For instance, instead of:

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

Use

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

Then you can reference it in your javascript:

Where you have

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

Try

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

$(this) just grabs whatever was clicked, so you can have multiple classes of the same kind.