Jquery Dialog and Div Position
Using the jquery UI Dialog, why is it that when the div that I want to make a dialog of has a position of absolute, the resulting dialog is minimized (can only see the header of the dialog .. if I take out the absolute position everything is fine ..?
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link type="text/css" href="css/cupertino/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#layer2").dialog();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="layer2" style="position: absolute; le开发者_开发技巧ft: 70px; top: 66px; width: 161px; height: 160px; z-index: 1">
test layer</div>
</body>
</html>
You can try to wrap the dialog in another absolute positioned div:
<div id="wrapper" style="position: absolute; left: 70px; top: 66px; width: 161px; height: 160px; z-index: 1">
<div id="layer2">test layer</div>
</div>
On the other hand, I think you can specify the behaviour with the dialog options:
$('#layer2').dialog({ position: '[66,77]', draggable: false, width: 161, height: 160 });
See http://docs.jquery.com/UI/Dialog for the full Dialog option list.
You should really be positioning the dialog through the jQuery UI Dialog attributes - remove the style attributes you have specified in the div.
精彩评论