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 问题解决了  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM