Многоразовый диалог 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и я понятия не имею, как это сделать, потому что я не могу использовать атрибут класса из-за стилей, которые мне тоже нужно использовать.Я не могу использовать id attrubutes с одинаковыми значениями на той же странице.И нет никакого способа, которым я могу использовать это так?Может быть, с атрибутом, отличным от id (класс зарезервирован для css)?
<input id="baseDialogOpener" type="button" value="Update" /><br> <div id="baseDialog" title="Test Dialog" class="divClass"><br> <form>...</form><br> </div><br> <input id="baseDialogOpener" type="button" value="Update 2" /><br> <div id="baseDialog" title="Test Dialog 2" class="divClass"><br> <form>...</form><br> </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) просто захватывает все, что было нажато, поэтому вы можете иметь несколько классов одного вида.