jquery multiple dialoge boxes

Hi i am trying to put multiple dialog boxes in a single page. i had downloaded demo for a single dialog box and apply same effect to different "div"s.. but it came on the same position. how can i put diff. dialog boxes in diff positions ? i has set styles for 2nd and 3rd "div"s; but its not working.. somebody please help me..

this is my code..

jQuery UI Dialog - Default functionality

<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js">开发者_运维技巧;</script>
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>


<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
    $("#dialog").dialog();
});

$(function() {
    $("#two").dialog();
});

</script>

regards tismon

Specifies where the dialog should be displayed. Possible values:

1. a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'.

2. an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100])

3. an array containing x,y position string values (e.g. ['right','top'] for top right corner).

Code examples

Initialize a dialog with the position option specified.

$( ".selector" ).dialog( { position: 'top' } );

Get or set the position option, after init.

//getter
var position = $( ".selector" ).dialog( "option", "position" );

//setter
$( ".selector" ).dialog( "option", "position", 'top' );

source
quick demo