I have a test php file which has 50 buttons in a table (just to make a big table). When the first button is clicked, I want a JQuery dialog box which has a html textbox to open via JQuery. For now, the code opens the textbox, but at the bottom of the screen. That is below the table. My objective is to open at the center of the current screen, ie, without being scrolled down by the user. Here’s my code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js">
**<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />**
</script>
<script type="text/javascript" >
$(document).ready(function(){
showClick();
});
function showClick(){ $('#comment0').click(function(ez) {
$('#0').dialog('open');
ez.preventDefault();
return false;
});
$('#0').dialog({
autoOpen: false,
modal: true,
resizable: false,
title: 'haha',
height: 'auto',
draggable: true,
position: 'center'
}); }
</script>
</head>
<body>
<?php
?><div id="0"><input type="text" ></div>
<?php
echo "<table>";
for($i=0; $i<50; $i++) {?>
<tr>
<td><input type="button" class="comment0" value="Comment" id="comment0"></td>
</tr>
<!--div id="<?php echo $i; ?>" style="display :none"><input type="text" ></div-->
<?php
} ?>
<?php
echo "</table></body></html>";
?>
Note: This is a quick dirty code, I was just testing the JQuery’s behavior with big table size. What am I doing wrong here?
Thanks for any help!
EDIT: Turns out you have to import the JQuery CSS. Now the problem is, the dialog box opens at the center of the table. is there anyway for the dialog box to open at the center of the current screen? Thanks!
Add the jquery UI stylesheet
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />