在使用dialog插件時,預設是螢幕居中的,但是當頁面出現滾動條時,dialog並沒有隨著滾動條往下滾動,這時就需要用戶滑動滾動條來定位dialog,這不人性化,在說出解決方案前來普及一下jquery關於定位的幾個方法
//获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(document.body).width(); //获取滚动条到顶部的垂直高度 $(document).scrollTop(); //获取滚动条到左边的垂直宽度 $(document).scrollLeft();
ok,下面問題就很好處理了,移動dialog有現成的函數,不過dialog本身沒有move函數,但是dialog是繼承自panel的,panel有move函數,因此可以呼叫panel的move函數來移動dialog
$('#dlg').dialog('open'); $("#dlg").panel("move",{top:$(document).scrollTop() + ($(window).height()-250) * 0.5});
其中$(window).height()-250,這裡250px是dialog的寬度。
更多jquery easyui滾動條部分設定介紹相關文章請關注PHP中文網!