How does one include multiple modal dialogs on same page?

[drayarms]

Hello, I seem to have just run into a brick wall.  I have 2 modal dialogs on the same webpage, each of which can be triggered by clicking on the appropriate button.  Well The first one seems to prevent the second one from being loaded into the DOM.  I'm going to really simplify the code that I'm working with.

 

jQ

 

$(document).ready(function() {//Picture upload dialog window

  	$("#dialog1").dialog({


    		width: 660,

   		height: 495,

   		dialogClass: "dialog",

    		autoOpen: false,

	position: "center",

    		overlay: { opacity:0.9, background: "black"}


  	});



//Open the modal window when  link1 is clicked

$('#link1').click(function(){ $('#dialog1').dialog('open'); });


  

});




$(document).ready(function() {//Picture upload dialog window

  	$("#dialog2").dialog({


    		width: 660,

   		height: 495,

   		dialogClass: "dialog",

    		autoOpen: false,

	position: "center",

    		overlay: { opacity:0.9, background: "black"}


  	});



//Open the modal window when  link1 is clicked

$('#link2').click(function(){ $('#dialog2').dialog('open'); });


  

});

 

html

 

<div id = "dialog1">  content1 </div> 

<div id = "dialog2"> </div>


<div id = "link1" style = "pointer:cursor">// Link that pop opens modal dialog 1 

<div id = "link2" style = "pointer:cursor">// Link that pop opens modal dialog 2

 

 

Well, the separate dialog windows open when I have just one on them on the page. But when I have two of them as above, just the first one (in this case dialog 1) opens and not the other.  So clearly the first is preventing the second from being loaded or it would seem. How can I fix this?