解决jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug

使用panel的onMove事件解决了panel,dialog以及window组件在被拖动时,会超出浏览器边界而无法拖回的情况。

当窗口被拖出浏览器有边界时,$(document).width();会增大,增大的部分就是窗口超过浏览器窗口的部分,所以right > browserWidth条件永远无法满足。

如果我们在思考得多一点,其实对于panel,dialog,window三个组件,我们往往要求的并不是它不能超出浏览器界限,而是要求它不能超出父元素界限,而且当父元素的overflow不是hidden的时候,应该允许组件超出父元素右下侧,个人觉得这样更合理。

真的这个bug,所以最终的代码改为以下形式较为合理:

/**

* add by cgh

* 针对panel window dialog三个组件拖动时会超出父级元素的修正

* 如果父级元素的overflow属性为hidden,则修复上下左右个方向

* 如果父级元素的overflow属性为非hidden,则只修复上左两个方向

* @param left

* @param top

* @returns

*/

var easyuiPanelOnMove = function(left, top) {
var parentObj = $(this).panel('panel').parent();
if (left < 0) {
$(this).window('move', {
left : 1
});
}
if (top < 0) {
$(this).window('move', {
top : 1
});
}
var width = $(this).panel('options').width;
var height = $(this).panel('options').height;
var right = left + width;
var buttom = top + height;
var parentWidth = parentObj.width();
var parentHeight = parentObj.height();
if(parentObj.css("overflow")=="hidden"){
if(left > parentWidth-width){
$(this).window('move', {
"left":parentWidth-width
});
}
if(top > parentHeight-height){
$(this).window('move', {
"top":parentHeight-height
});
}
}
};
$.fn.panel.defaults.onMove = easyuiPanelOnMove;
$.fn.window.defaults.onMove = easyuiPanelOnMove;
$.fn.dialog.defaults.onMove = easyuiPanelOnMove;

将js代码保存为js文件,在jquery.easyui.min.js之后引入你保存的js文件即可。

百度博客搬家:源地址:http://hi.baidu.com/confidence68/item/0f10ab18ad5a96c638cb304c

解决jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug

时间: 2024-10-08 01:09:12

解决jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug的相关文章

jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案

jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案 2014年8月30日 3233次浏览 相信很多前端朋友都用过jqueryeasyUI,jqueryeasyUI功能很强大,可以实现我们前端很多想要的效果,例如,下拉树也就是select tree等.但是jqueryeasyUI底层构建不是很好,简单的应用还可以,深入开发的话,还是推荐用extjs相对好一些! 今天的这篇文章,主要是解决我很久很久之前遇到的一个问题,今天重新在博客上发一遍,就是jqueryea

Android 大约Dialog弹出窗口

直接效果图: 实现步骤: 1.主界面activity_main.xml非常easy,一个button <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layou

ajax请求弹出窗口被浏览器拦截的问题

var w = window.open(); function ck(){ $.ajax({ url : '#', data:#, success : function(data1){ w.location = "#"; } }); } 记得将window设置在异步请求外面,也不用设置同步,就能实现不被浏览器拦截.

window.open() 某些情况会被浏览器阻止弹出窗口及解决办法

window.open() 的作用是创建一个新的浏览器窗口用来打开相关的资源,这是一个原生的 Javascript API 接口. 有关 window.open() 的基本使用可以参考 mozilla 提供的  API 文档:window.open . 大部分现代的浏览器(泛指 Chrome / Firefox / IE 10+ / Safari)都默认开启了阻止弹出窗口的策略,原因是 window.open 被广告商滥用,严重影响用户的使用.这个阻止弹出窗口的操作,并不是直接封杀 windw.

Win8 弹出窗口不在最前端的解决方法

Win8系统的使用者有很多会遇到弹出窗口不在最前端的情况(自动隐藏,点下页面又出来),比如另存为的时候 ,或是登录路由器时弹出的登录框时. 引起这个异常的原因是与系统输入法冲突引起,但又不可能不用第三方的输入法,所以必需用其它方式解决,按下面图片步骤设置,即可完美解决.

Android-Popupwindow和Dialog做弹出窗口

有一个需求是:在一个图片按钮上点击,在按钮的上方弹出一个弹框,根据弹框的内容页面做不同的显示.这个其实没什么难的,主要是要控制好弹框的显示位置,让弹框显示在图片的正上方的中间. 一开始是用的Popupwindow,但是Popupwindow不能给弹窗之外的页面加一个半透明的蒙层,当然可以在页面上加一个专门的作为蒙层的View,但是很显然,这么做会代码变得很恶心,于是又换成了Dialog,因为Dialog弹出的时候会自动加一个蒙层的,但是这个时候,弹框显示位置的Y坐标不对了,后来一顿查,原来Dia

JavaScript页面刷新与弹出窗口问题的解决方法

1. [代码][JavaScript]代码     ?一.无提示刷新网页 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点“确定”才会刷新.而有的页面不会提示,不弹出提示窗口,直接就刷新了. 如果页面没有form,则不会弹出提示窗口. 如果页面有form表单,  a)< form method="post" ...> 会弹出提示窗口  b)< form method="get" ...> 不会弹出 二.javascript刷新页面

easyui datagrid 弹出窗口空白的解决方法

我的主页面,代码如下: Javascript代码 //添加数据弹出窗口 $(function(){ addDataWin = $('#addData-window').window({ href:'${basePath}/page/marketPlat2/addData/addData.jsp?workId=${workId}year=${year}&month=${month} &quarter=${quarter}&businessType=${businessType}&am

bootstrap 解决弹出窗口(modal) 常见问题

无法使用键盘esc关闭窗口方法: 首先在modal容器的div中增加属性tabindex="-1",其次设置键盘ESC属性keyboard为true: 方法1:使用js打开窗口时 $("#modal").modal({keyboard:true}) 方法2:使用H5属性在modal窗口的div中增加data-keyboard="true": 点击弹出框(modal)外空白处会关闭弹出窗口(modal): 使用backdrop属性,如果希望有背景则