How to use two dialog box in the same page?
Hello!
I'm testing the jQuery's dialog box in a plain html page just for get involved and I was trying to create two link to open two diferent dialog box but I don't know how to modify the script in order to call differents ID. This is what I have:
<html>
<head>
<link type="text/css" href="style/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
</head>
<body>
<a id="dialog_link" href="#">
<img src="images/thumbnails/luigi.jpg" alt="Luigi Russolo" />
</a>
<br />
<a id="dialog_link2" href="#">
<img src="images/thumbnails/martenot.jpg" alt="Martenot" />
</a>
<div id="dialog" title="Dialog Title">
<p>Fisrt dialog box</p>
</div>
<div id="dialog2" title="Dialog Title">
<p>Second dialog box.</p>
</div>
</body>
</html>
As you see I'm trying to use the id="dialog_link2" to open the id="dialog2". But how can I do to tell the script that there are two different links and boxes?
Any help or explination will help me, thanks in advice.
Jarkaos