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

最新推荐文章于 2024-10-23 09:01:47 发布

转载最新推荐文章于 2024-10-23 09:01:47 发布 · 1.2k 阅读

PHP 专栏收录该内容

417 篇文章

订阅专栏

本文介绍了一种改进的Popup.js库，解决了在不同浏览器中全屏遮罩层的兼容性问题，并增加了回调执行服务器端方法的功能，适用于ASP.NET或AJAX开发。

百度空间的弹出窗口和拖拽效果(也就是popup.js),代码精简，效果也很好，我们可以在很多大型网站上见到这种效果，在我的项目中也使用了该js。

关键词:百度 Popup.js 弹出框

脚本之家之前发布过这样的代码，其实问题不大，但这里的版本主要是增加一些功能，回调执行服务器端的方法，对于asp.net开发或ajax开发都是非常有价值的改进。
先看下效果图：

原有百度的Popup.js在有

复制代码代码如下:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

声明的网页下存在兼容性问题，即在IE6,7,8下，遮罩层是可以全屏，但在Firefox和Chrome下无法全屏遮罩。
　　造成遮罩层在FF和Chrome下无法全屏的问题在267行：

复制代码代码如下:

   var C = '<div id="dialogBoxBG" style="position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:' + A + ";" + H + "background-color:" + this.color.cColor + ';display:none;"></div>';
 

遮罩层dialogBoxBG 的style只是单纯的设置为height:100%，所以在有<!DOCTYPE...>声明下的页面无法兼容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)。
完整代码：

复制代码代码如下:

   <asp:Button ID="btnDel" runat="server" Text="删除" OnClick="btnDel_Click" 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事件：

复制代码代码如下:

   <asp:Button ID="btnDel" runat="server" OnClick="btnDel_Click" ToolTip="删除" CssClass="deleteBtn" OnClientClick="return subDel(this);return false;" />
 

父页面定义js方法：

复制代码代码如下:

 
 function parentDel(obj) 
  
 { 
  
 return ShowConfirmIFrame('删除','是否确定删除？',obj); 
  
 }

popup.js进化版与普通修正版下载原版也修正了上面所说的并没有完全兼容FF和Chrome的问题。

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

关键词:百度 Popup.js 弹出框

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