قراردادن چندتا dialog روی صفحه

[NiMble_m]

سلام دوستان
خسته نباشید
من میخواستم چندتا دیالوگ روی صفحه بزارم با چندتا دکمه مختلف میخواستم ببینم میتونم همچین کاری کنم یا نه؟؟؟؟مثلا هر وقت روی هر دکمه ای کلیک کرد دیالوگ مربوط به اون باز بشه.
اینم کد منه که واسه یه دیالوگ کار میکنه ولی وقتی چندتا میشه دیگه کار نمیکنه

ممنون میشم کمک کنید


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>


<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {

function runEffect() {

var selectedEffect = "bounce";


var options = {};

$( "#effect" ).show( selectedEffect, options, 500, callback );
};

function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};

$( "#button" ).click(function() {
runEffect();
return false;
});

$( "#effect" ).hide();
});
</script>



<div class="demo">

<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Show</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>

</div>


<a href="#" id="button" >Run Effect</a>

</div>

[plague]

دیالگو و دکمه ها رو میزاری توی صفحه بعد دیالوگ ها رو همه رو مخفی میکنی
بعد
یه تابع جی کوئری مینویسی که آیدی یه دیالوگ رو میگیره و اون رو تاگل میکنه

حالا کافیه کاری کنی که هر دکمه ای کلیک شد آیدی دیالوگش رو به اون تابع جی کوئری بفرسته

کد جی کوئریش 2-3 خط بیشتر نمیشه