Baidu Popup.js 팝업 상자 진화 버전, 드래그 앤 드롭 작은 프레임 릴리스, IE6/7/8, Firefox, Chrome_javascript 기술과 호환 가능

Script House는 이전에 이러한 코드를 출시한 적이 있지만, 이번 버전에서는 주로 서버측 메서드를 실행하기 위한 일부 기능과 콜백을 추가했습니다. 이는 asp.net 개발이나 Ajax 개발에 매우 ​​귀중한 개선 사항입니다.
먼저 렌더링을 살펴보겠습니다.


원본 Baidu의 Popup.js가 있습니다

코드 복사 코드는 다음과 같습니다.

선언된 웹 페이지, 즉 IE6, 7, 8에서는 호환성 문제가 있습니다. 레이어는 전체 화면이 가능하지만 Firefox 및 Chrome에서는 전체 화면 마스킹이 불가능합니다.
FF 및 Chrome에서 마스크 레이어가 전체 화면이 되지 않는 문제는 267번째 줄에 있습니다.

코드 복사 코드는 다음과 같습니다.

var C = '

';

스타일 마스크 레이어 대화상자BG는 단순히 높이:100%로 설정되므로 문이 있는 페이지는 FF 및 Chrome과 호환되지 않습니다.
그러나 현재 인터넷에 "luocheng"popup.js의 "완벽한 버전"이 있습니다. 이를 다운로드하여 사용해 본 결과 FF 및 Chrome과 완전히 호환되지 않습니다. . 마스크 레이어가 전체 화면이 될 수 없는 버그가 여전히 있습니다. 소스 코드를 읽고 오류를 발견했습니다. Luocheng의 버전에는 getValue 메소드가 추가되었으며 실제로 스위치 문에 "clientHeight"라는 두 가지 사례가 있었습니다! 하나를 삭제한 후에도 계속 테스트하세요. 계속해서 코드를 읽고 문제를 해결하세요. G('dialogBoxBG').style.height = getValueHeight; 마스크 레이어 대화상자BG에 값을 지정하면 웹 표준을 따르지 않으므로 FF와 Chrome에 버그가 있습니다.

코드 복사 코드는 다음과 같습니다.

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")]; 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는 페이지의 실제 콘텐츠 높이이며, FF의 scrollHeight보다 작을 수 있습니다. 웹페이지 높이의 내용이지만 최소값은 clientHeight입니다.
/************************************************** *****/
확장 방법:

1. 서버측 메서드 실행을 위한 확인 상자 콜백 팝업

코드 복사 코드는 다음과 같습니다.

function ShowConfirm(title, content, target) //확인 대화 상자 표시
{
var pop = new Popup({
contentType: 3,
isReloadOnClose: false,
너비: 350,
높이: 110
})
pop.setContent("title", title)
pop.setContent("confirmCon", content); .setContent("callBack", ShowCallBackServer); //콜백 함수
pop.setContent("parameter", {
id: "divCall",
str: target,
obj: pop
});
pop.show();
popp
return false

//서버측 실행 즉, __doPostBack('','') 작업을 수행합니다.

function ShowCallBackServer(para) { var str = para["str"] if ("" != str && null != str) {
str = GetEachBtnName(str);
if ("" != str && null != str) {
//alert(str); , '');
}
}
ClosePop();
}
//페이지의 버튼 이름 탐색
function GetEachBtnName(obj) {
return obj .name == '' || obj.name == null ? obj.name :
}



OnClick에서 ="btnTest_Click"의 Button 컨트롤에 OnClientClick을 반환 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("매개변수", {
id: "divCall",
str: target,
obj: pop
})
temp = target; .build( );
pop.show();
return false;
}
function ShowIFrame() {
parent. 프레임[" 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 , '' ; >



코드 복사


코드는 다음과 같습니다.


　 //삭제
함수 subDel(obj)
{
return parent.parentDel(obj);
}

버튼 버튼 컨트롤은 OnClientClick 이벤트를 등록합니다.

코드 복사 코드는 다음과 같습니다.

상위 페이지 정의 js 메서드:




코드 복사

코드는 다음과 같습니다.

function parentDel(obj) { return ShowConfirmIFrame('Delete ', '정말 삭제하시겠습니까? ',obj); }

popup.js 진화 버전 및 일반 수정 버전 다운로드

원본 버전도 위에서 언급한 대로 수정되었으며 완전히 호환되지 않습니다. FF와 크롬 질문입니다.