바 이 두 Popup.js 팝 업 상자 진화 판 드래그 작은 프레임 발표 호 환 IE6/7/8,Firefox,Chrome

우 리 는 이전에 이런 코드 를 발표 한 적 이 있 는데,사실 문제 가 크 지 않 지만,이곳 의 버 전 은 주로 일부 기능 을 추가 하고,서버 단 을 되 돌려 실행 하 는 방법 으로,asp.net 개발 이나 ajax 개발 에 있어 서 매우 가치 있 는 개선 이다.먼저 효과 도 를 살 펴 보 자.기 존 바 이 두 의 Popup.js 는

성명 이 있 는 홈 페이지 에서 호환성 문제 가 존재 한다.즉,IE6,7,8 에서 커버 층 은 전체 화면 이 가능 하지만 Firefox 와 Chrome 에 서 는 전체 화면 이 가 려 지지 않 는 다.커버 층 이 FF 와 Chrome 에서 전체 화면 을 사용 할 수 없 는 문 제 는 267 줄 입 니 다.

var C = '
';

遮罩层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('dialog BoxBG').style.height=getValue Height;G('dialogBoxBG').style.height=getValueHeight+"px"로 변경 하기;됐다.그래서 여러분 은 앞으로 개발 과정 에서 너비 와 높이 에'px'를 더 하 는 것 이 좋 습 니 다.이런 부서.페이지 높이 가 서로 다른 브 라 우 저 사이 의 차이 참고 자 료 를 첨부 합 니 다.client Height:IE 와 FF 에서 이 속성 은 차이 가 없습니다.브 라 우 저의 시각 영역,즉 브 라 우 저의 도구 모음 상태 표시 줄 을 제외 한 나머지 페이지 전시 공간의 높이 를 말 합 니 다.scrollHeight:IE 에서 scrollHeight 는 페이지 의 실제 내용 의 높이 로 client Height 보다 작 을 수 있 습 니 다.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="btnTestClick"의 Button 컨트롤 에 OnClient Click 을 return Show Confirm(','삭제 하 시 겠 습 니까?'로 등록 합 니 다.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); 
} 

버튼 컨트롤 등록 OnClient Click 이벤트:

父页面定义js方法：

 
function parentDel(obj) 
{ 
return ShowConfirmIFrame('  ','      ？',obj); 
} 

popup.js 진화 판 및 일반 수정판 다운로드 원판 도 위 에서 말 한 FF 와 크롬 을 완전히 호 환 하지 않 는 문 제 를 수정 했다.