I have honestly been working on this for about two weeks and researched as much as possible. All I’m attempting to do is have various images on the side of a website. When you click one a dialog box appears with content in it. I can get one dialog to work, but the second wont open a dialog box. I’ve tried using the .dialog(‘open’) command, but it doesn’t seem to accomplish the goal. Here’s the code I have so far, any assistance would be appreciated.
<BODY>
<LINK rel=stylesheet type=text/css href="css/ui-lightness/jquery-ui-1.8.18.custom.css">
<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>
<A id=infopic href="#"><IMG style="Z-INDEX: 101; POSITION: absolute; TOP: 210px; LEFT: 211px" border=0 src="iconplace.png"></A>
<DIV style="DISPLAY: none" id=info>info</DIV>
<SCRIPT language=javascript type=text/javascript>
$("#infopic").click(function() {
$("#info").dialog({
autoOpen:"false",
stack:"true",
height: "600",
width: "700",
resizable: "false",
Title: "Info"
});
})
</SCRIPT>
<A id=portfoliopic href="#"><IMG style="Z-INDEX: 102; POSITION: absolute; TOP: 102px; LEFT: 390px" border=0 src="iconplace.png"></A>
<DIV style="DISPLAY: none" id=portfolio title=Portfolio>Portfolio pics</DIV>
<SCRIPT language=javascript type=text/javascript>
$("#portfoliopic").click(function() {
$("portfolio").dialog({
autoOpen:"false",
stack:"true",
height: "600",
width: "700",
resizable: "false"
});
})
</SCRIPT>
</BODY></HTML>
On a side note, this doesn’t work in Firefox or Safari, but works in Google Chrome and IE. Any speculation on that would be helpful as well.
Change
$("portfolio").dialog({to$("#portfolio").dialog({. That should get the second dialog box to work.And I re-iterate @Ohgodwhy’s suggestion to clean up your code.