How does one include multiple modal dialogs on same page?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

How does one include multiple modal dialogs on same page?

Post by 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

Code: Select all



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

Code: Select all


<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?
User avatar
Robert07
Forum Contributor
Posts: 113
Joined: Tue Jun 17, 2008 1:41 pm

Re: How does one include multiple modal dialogs on same page

Post by Robert07 »

Have you tried putting both dialog definitions into one document ready function instead of two?
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

Re: How does one include multiple modal dialogs on same page

Post by drayarms »

@robert, that worked. thanks:)
Post Reply