百度空间的弹出窗口和拖拽效果(也就是popup.js),代码精简,效果也很好,我们可以在很多大型网站上见到这种效果,在我的项目中也使用了该js。
原有百度的Popup.js在有
viewsource
print?
1 | <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
声明的网页下存在兼容性问题,即在IE6,7,8下,遮罩层是可以全屏,但在Firefox和Chrome下无法全屏遮罩。
造成遮罩层在FF和Chrome下无法全屏的问题在267行:
viewsource
print?
1 | var C= '<divid="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。
viewsource
print?
1 | setBackgroundSize: function (){ |
3 | var getMaxValueWidth=[getValue( "clientWidth" ),getValue( "scrollWidth" )]; |
4 | getValueWidth=eval( "Math.max(" +getMaxValueWidth.toString()+ ")" ); |
5 | G( 'dialogBoxBG' ).style.width=getValueWidth; |
7 | var getMaxValueHeight=[getValue( "clientHeight" ),getValue( "scrollHeight" )]; |
8 | getValueHeight=eval( "Math.max(" +getMaxValueHeight.toString()+ ")" ); |
9 | G( 'dialogBoxBG' ).style.height=getValueHeight;}, |
解决方法很简单:G('dialogBoxBG').style.height=getValueHeight;修改成G('dialogBoxBG').style.height=getValueHeight+"px";即可。
令附上获取页面高度在不同浏览器之间的差异参考资料:
clientHeight:在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度;
scrollHeight:在IE下,scrollHeight是页面实际内容的高度,可以小于clientHeight;在FF下,scrollHeight是网页内容高度,不过最小值是clientHeight。
/*******************************************************/
拓展方法:
1.弹出确认框回调执行服务器端方法
viewsource
print?
01 | function ShowConfirm(title,content,target) //显示确认对话框 |
09 | pop.setContent( "title" ,title); |
10 | pop.setContent( "confirmCon" ,content); |
11 | pop.setContent( "callBack" ,ShowCallBackServer); //回调函数 |
13 | pop.setContent( "parameter" ,{ |
23 | //执行服务器端方法,即进行__doPostBack('','')操作 |
24 | function ShowCallBackServer(para){ |
26 | if ( "" !=str&& null !=str){ |
27 | str=GetEachBtnName(str); |
29 | if ( "" !=str&& null !=str){ |
37 | function GetEachBtnName(obj){ |
38 | return obj.name== '' ||obj.name== null ?obj.id:obj.name; |
使用方法:
在一个有OnClick="btnTest_Click"的Button控件上注册OnClientClick为returnShowConfirm('','是否确定删除?',this)。
完整代码:
viewsource
print?
1 | <asp:ButtonID= "btnDel" runat= "server" Text= "删除" OnClick= "btnDel_Click" |
2 | OnClientClick= "returnShowConfirm('','是否确定删除?',this)" /> |
2.在iframe中使用popup.js
我们在一个页面中内嵌了一个iframe,想让iframe中弹出的对话框或者确认框在父页面中弹出来,实现遮罩层全屏而不是只是在iframe页面中全屏,然后确认后执行回调操作iframe,可以是执行iframe中的服务器端方法。
viewsource
print?
01 | function ShowConfirmIFrame(title,content,target) //显示确认对话框 |
09 | pop.setContent( "title" ,title); |
10 | pop.setContent( "confirmCon" ,content); |
11 | pop.setContent( "callBack" ,ShowIFrame); //回调函数 |
13 | pop.setContent( "parameter" ,{ |
28 | parent.frames[ "content" ].window.ShowCallBackServerIFrame(temp); |
30 | //parent.window.iframe.ShowCallBackServer(); |
33 | function ShowCallBackServerIFrame(para){ |
35 | if ( "" !=str&& null !=str){ |
36 | str=GetEachBtnName(str); |
38 | if ( "" !=str&& null !=str){ |
使用方法:
iframe中定义js方法:
viewsource
print?
4 | return parent.parentDel(obj); |
Button按钮控件注册OnClientClick事件:
viewsource
print?
1 | <asp:ButtonID= "btnDel" runat= "server" OnClick= "btnDel_Click" ToolTip= "删除" CssClass= "deleteBtn" OnClientClick= "returnsubDel(this);returnfalse;" /> |
父页面定义js方法:
viewsource
print?
3 | return ShowConfirmIFrame( '删除' , '是否确定删除?' ,obj); |
popup.js进化版下载[点击下载]
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理