Jquery对话和Div位置

时间:2009-10-25 00:10:24

标签: jquery user-interface

使用jquery UI对话框,为什么当我要创建对话框的div具有绝对位置时,生成的对话框最小化(只能看到对话框的标题...如果我取出绝对的位置一切都很好..?

由于

<!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; left: 70px; top: 66px; width: 161px; height: 160px; z-index: 1">
    test layer</div>

</body>
</html>

alt text

2 个答案:

答案 0 :(得分:3)

您可以尝试将对话框包装在另一个绝对定位的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>

另一方面,我认为您可以使用对话框选项指定行为:

$('#layer2').dialog({ position: '[66,77]', draggable: false, width: 161, height: 160 });

有关完整的对话框选项列表,请参阅http://docs.jquery.com/UI/Dialog

答案 1 :(得分:2)

您应该通过jQuery UI Dialog属性定位对话框 - 删除您在div中指定的样式属性。