不同內容的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" />
<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>
期待您的回答。
UPDATE：我有上面的代碼通過使用class屬性來執行，但是當我點擊按鈕時，所有的對話框都會立刻出現。有任何解決這個問題的方法嗎？

Answer 1

該對話框可以在服務器打開時從.htm文件加載內容。

您可以使用這樣的事情：

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

UPDATE：這段代碼演示瞭如何具有相同的。點擊（）顯示基於按鈕不同的內容。

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

您可以將您的id的使用多個class。

例如，而不是：

<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)只是抓住任何被點擊，所以你可以有多個類的同類。