您好,欢迎访问一九零五行业门户网

百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome_javascript技巧

脚本之家之前发布过这样的代码,其实问题不大,但这里的版本主要是增加一些功能,回调执行服务器端的方法,对于asp.net开发或ajax开发都是非常有价值的改进。
先看下效果图:
原有百度的popup.js在有
复制代码 代码如下:
声明的网页下存在兼容性问题,即在ie6,7,8下,遮罩层是可以全屏,但在firefox和chrome下无法全屏遮罩。
造成遮罩层在ff和chrome下无法全屏的问题在267行:
复制代码 代码如下:
var c = '
';
遮罩层dialogboxbg 的style只是单纯的设置为height:100%,所以在有..>声明下的页面无法兼容ff和chrome。
然而目前网上有一个“luocheng”的“完美版”popup.js,下载下来试用了下,结果并没有完全兼容ff和chrome,还是存在遮罩层无法全屏的bug,读了一下源代码,找到了错误所在:luocheng的版本中增加了一个getvalue方法,switch语句中的case clientheight:竟然有两个!删掉一个以后继续测试,还是无法兼容ff和chrome,继续读代码排错,增加的setbackgroundsize方法中g('dialogboxbg').style.height = getvalueheight;只是复制给遮罩层dialogboxbg的height=整数值,这个是不遵循web标准的,所以在ff和chrome下存在bug。
复制代码 代码如下:
setbackgroundsize: function() {
var getvaluewidth;
var getmaxvaluewidth = [getvalue(clientwidth), getvalue(scrollwidth)];
getvaluewidth = eval(math.max( + getmaxvaluewidth.tostring() + ));
g('dialogboxbg').style.width = getvaluewidth;
var getvalueheight;
var getmaxvalueheight = [getvalue(clientheight), getvalue(scrollheight)];
getvalueheight = eval(math.max( + getmaxvalueheight.tostring() + ));
g('dialogboxbg').style.height = getvalueheight; },
解决方法很简单:g('dialogboxbg').style.height = getvalueheight;修改成g('dialogboxbg').style.height = getvalueheight + px;即可。
所以大家以后在开发过程中,注意对于宽度与高度最好加上'px';这样的单位。
令附上获取页面高度在不同浏览器之间的差异参考资料:
clientheight:在ie和ff下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度;
scrollheight:在ie下,scrollheight 是页面实际内容的高度,可以小于clientheight;在ff下,scrollheight 是网页内容高度,不过最小值是clientheight。
/*******************************************************/
拓展方法:
1.弹出确认框回调执行服务器端方法
复制代码 代码如下:
function showconfirm(title, content, target) //显示确认对话框
{
var pop = new popup({
contenttype: 3,
isreloadonclose: false,
width: 350,
height: 110
});
pop.setcontent(title, title);
pop.setcontent(confirmcon, content);
pop.setcontent(callback, showcallbackserver); //回调函数
pop.setcontent(parameter, {
id: divcall,
str: target,
obj: pop
});
pop.build();
pop.show();
popp = pop;
return false;
}
//执行服务器端方法,即进行__dopostback('','')操作
function showcallbackserver(para) {
var str = para[str];
if ( != str && null != str) {
str = geteachbtnname(str);
if ( != str && null != str) {
//alert(str);
__dopostback(str, '');
}
}
closepop();
}
//遍历页面中的button名称
function geteachbtnname(obj) {
return obj.name == '' || obj.name == null ? obj.id : obj.name;
}
使用方法:
在一个有onclick=btntest_click 的button控件上注册onclientclick为return showconfirm(' ','是否确定删除?',this)。
完整代码:
复制代码 代码如下:
2.在iframe中使用popup.js
我们在一个页面中内嵌了一个iframe,想让iframe中弹出的对话框或者确认框在父页面中弹出来,实现遮罩层全屏而不是只是在iframe页面中全屏,然后确认后执行回调操作iframe,可以是执行iframe中的服务器端方法。
复制代码 代码如下:
function showconfirmiframe(title, content, target) //显示确认对话框
{
var pop = new popup({
contenttype: 3,
isreloadonclose: false,
width: 350,
height: 110
});
pop.setcontent(title, title);
pop.setcontent(confirmcon, content);
pop.setcontent(callback, showiframe); //回调函数
pop.setcontent(parameter, {
id: divcall,
str: target,
obj: pop
});
temp = target;
pop.build();
pop.show();
popp = pop;
return false;
}
var temp;
function showiframe() {
parent.frames[content].window.showcallbackserveriframe(temp);
// parent.window.iframe.showcallbackserver();
}
function showcallbackserveriframe(para) {
var str = para;
if ( != str && null != str) {
str = geteachbtnname(str);
if ( != str && null != str) {
__dopostback(str, '');
}
}
closewin();
}
使用方法:
iframe中定义js方法:
复制代码 代码如下:
//删除
function subdel(obj)
{
return parent.parentdel(obj);
}
button按钮控件注册onclientclick事件:
复制代码 代码如下:
父页面定义js方法:
复制代码 代码如下:
function parentdel(obj)
{
return showconfirmiframe('删除','是否确定删除?',obj);
}
popup.js进化版与普通修正版下载  原版也修正了上面所说的并没有完全兼容ff和chrome的问题。
其它类似信息

推荐信息