Dialog Boxen

[-Andi-]

Hi,

ich habe ein Problem mit den jQuery Dialog Boxen. Ich will bei einem Klick auf verschiedene Links verschiedene Boxen anzeigen.
Das ist mein bisheriger Code für eine Box:

	<script type="text/javascript" src="js/ui/jquery.ui.dialog.js"></script>
	<script type="text/javascript">
	$(function() {
				// Dialog
				$("#dialog").dialog({
					autoOpen: false,
					width: 500,
					buttons: {
						"Ok": function() { 
							$(this).dialog("close"); 
						}
					}
				});
				
				// Dialog Link
				$("#dialog_link").click(function(){
					$("#dialog").dialog('open');
					return false;
				});
	});
	</script>

<a href="#" id="dialog_link">Erster Link</a>

         <div id="dialog" title="BoxTitel">
           <p>Mein Text</p>
         </div>

Das funktioniert ja auch gut. Ich möchte aber mehrere Dialoge anzeigen, also ca. 15 Stück

<a href="#" id="dialog_link1">Erster Link</a>
         <div id="dialog1" title="BoxTitel">
           <p>Mein Text</p>
         </div>

<a href="#" id="dialog_link2">Zweiter Link</a>
         <div id="dialog2" title="BoxTitel">
           <p>Mein anderer Text</p>
         </div>
...

<a href="#" id="dialog_link15">Fünfzehnter Link</a>
         <div id="dialog15" title="BoxTitel">
           <p>Mein 15. Text</p>
         </div>

Leider habe ich keinen blassen Schimmer wie ich die Boxen "dynamisieren" kann. Ich möchte also nicht, dass ich 15 mal den JavaScript Code ändern muss, um die Boxen anzuzeigen, sondern dass es irgendwie die ID's dazu benutzt.
Ich habe mittlerweile schon 3-4 Stunden gegoogelt aber leider nichts passendes gefunden

Weiß jemand wie ich das lösen kann?
Danke.

Mfg. -Andi-

[MichaG]

So richtig habe ich nicht verstanden was du genau erreichen möchtest - daher frei ins Blaue hinein:

Wenn du den Links, die den Dialog öffnen sollen, eine Klasse gibts á la "dialog" und per JQuery den Class-Selektor nimmst?

$(".dialog").dialog(...)

[-Andi-]

Also es versteckt mir schon mal alle Boxen. Das klappt ja schon mal.

Jetzt ist aber mein Problem, dass es beim Klick auf einen Link immer alle Dialogboxen öffnet. Ich möchte aber jeweils nur eine bestimmte öffnen.
Bei Klick auf den Link 1 möchte ich DialogBox 1 öffnen, bei Klick auf Link 2 die DialogBox2, usw.

So hab ich den Code jetzt mal umgeändert:

	<script type="text/javascript">
	$(function() {
				// Dialog
				$(".dialog").dialog({
					autoOpen: false,
					width: 500,
					buttons: {
						"Ok": function() { 
							$(this).dialog("close"); 
						}//, 
						//"Cancel": function() { 
						//	$(this).dialog("close"); 
						//} 
					}
				});
				
				// Dialog Link
				$(".dialog_link").click(function(){
					$(".dialog").dialog('open');
					return false;
				});
	});
	</script>

<a href="#" id="dialog1" class="dialog_link">Erster Link</a>
<a href="#" id="dialog2" class="dialog_link">Zweiter Link</a>

         <div id="dialog1" class="dialog" title="DialogBox1">
           <p>Text 1</p>
         </div>

         <div id="dialog2" class="dialog" title="DialogBox2">
           <p>Text 2</p>
         </div>

Hast du noch ne Idee?

[-Andi-]

Hi,

ich habs mittlerweile rausbekommen. Anbei der gesamte Quellocde:

	<script type="text/javascript">
	$(function() {
				// Dialog
				$(".dialog").dialog({
					autoOpen: false,
					width: 500,
					buttons: {
						"Ok": function() { 
							$(this).dialog("close"); 
						}//, 
						//"Cancel": function() { 
						//	$(this).dialog("close"); 
						//} 
					}
				});
				
				// Dialog Link
				$(".dialog_link").click(function(){
					$("#dialog" + this.id).dialog('open');
					return false;
				});
	});
	</script>

<a href="#" id="1" class="dialog_link">Erster Link</a>
<a href="#" id="2" class="dialog_link">Zweiter Link</a>

         <div id="dialog1" class="dialog" title="DialogBox1">
           <p>Text 1</p>
         </div>

         <div id="dialog2" class="dialog" title="DialogBox2">
           <p>Text 2</p>
         </div>