jquery dialog not centering?
http://stackoverflow.com/questions/3856026/jquery-dialog-not-centering
~ Rubens Mariuzzo (www.mariuzzo.com)
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css">
<div id="editDialog">
<div id="editDialogContent" style="font-size: 65%;">
<div id="editItemDialog" >
<table style="width: 100%">
<tr>
<td>
<label id="closeEditItemDialog" style="float: right;">[close]</label>
</td>
</tr>
</table>
</div>
<table style="width: 100%;">
<tr id="editDialogRow_1">
<td class="labelHeaders">
<label>Repair Date:</label>
</td>
<td class="valueCells">
<label class='labelValue' id="lblRepairDate" ></label>
</td>
<td>
<label class='labelEdit'>(edit)</label>
</td>
<td class="labelHeaders">
<label>Wrong Repair Ind:</label>
</td>
<td class="valueCells">
<input id="chkbWrongRepairInd" name="chkbWrongRepairInd" type="checkbox" />
</td>
<td>
</td>
<td class="labelHeaders">
<label>Currency:</label>
</td>
...
CSS
#loadingScreen {
background: url(Images/loading.gif) no-repeat 5px 8px;
padding-left: 25px;
}
.loadingScreenWindow .ui-dialog-titlebar-close {
display: none;
}
.labelEdit
{
text-decoration: underline;
cursor:pointer;
}
.labelValue
{
display:inline-block;
}
.labelHeaders
{
white-space: nowrap;
}
.valueCells
{
white-space: nowrap;
border: solid 1px white;
}
#editItemDialog{
margin: 0 auto;
position: absolute;
width: 60%;
height: 70px;
background-color: red;
}
JavaScript
$('#editItemDialog').hide();
$('#closeEditItemDialog').click( function() {
$('#editItemDialog').hide('slow');
});
$('.labelEdit').hover( function() {
$(this).parent().prev().css('border', 'solid 1px blue');
}, function() {
$(this).parent().prev().css('border', 'solid 1px white');
});
$('.labelEdit').click( function() {
$('#editItemDialog').show('slow');
});