Easyui Dialog 设置初始位置

有的朋友在使用Easyui Dialog的时候不知道怎么去设置初始位置 这里给出Demo  

我是拿Easyui解压包的Demo来修改的 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Basic Dialog - jQuery EasyUI Demo</title>
 6     <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/themes/default/easyui.css">
 7     <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/themes/icon.css">
 8     <link rel="stylesheet" type="text/css" href="../demo.css">
 9     <script type="text/javascript" src="http://www.cnblogs.com/jquery-1.8.0.min.js"></script>
10     <script type="text/javascript" src="http://www.cnblogs.com/jquery.easyui.min.js"></script>
11 </head>
12 <body>
13     <h2>Basic Dialog</h2>
14     <div class="demo-info">
15         <div class="demo-tip icon-tip"></div>
16         <div>Click below button to open or close dialog.</div>
17     </div>
18     <div style="margin:10px 0;">
19         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
20         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
21     </div>
22     <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
23         The dialog content.
24     </div>
25 </body>
26 </html>

很明显Dialog的位置是在屏幕中间的,这也是默认的  我们要做的就是给Dialog添加top和left属性,如:

<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px; top:100px; left:200px;">

我们可以神奇的发现 

OK 问题解决了  

 

posted @ 2013-04-11 09:21  SoraAoi丶  阅读(8086)  评论(0编辑  收藏  举报