js 로 구현 되 는 사용자 정의 대화 상자 구현 코드

안녕하세요,저 희 는 평소에 자바 script 을 사용 할 때 사용자 에 게 피드백 정 보 를 제공 해 야 합 니 다.이 기능 을 완성 하 는 데 여러 가지 방법 이 있 습 니 다.그러나 평소에 개발 할 때 우리 가 가장 많이 사용 하 는 것 은 alert 라 는 함수 일 수 있 습 니 다.그러나 그것 도 매우 부족 하 다.예 를 들 어 그의 외관 은 매우 간단 하고 통제 할 수 없다.또한 브 라 우 저 등급 에 속 하 는 함수 도 있 고 각 브 라 우 저 에서 자체 적 으로 이 루어 진 것 이기 때문에 서로 다른 브 라 우 저 위 에서 그의 화면 은 모두 다르다.예전 같 으 면 이런 상황 은 대부분 사용자 들 에 게 쉽게 받 아들 여지 지만 시간 이 지 날수 록 사용 자 는 더 좋 은 체험 을 하고 싶 어 졌 다.그래서 지금 은 많은 사이트 에서 JS 가 만 든 여러 가지 대화 상 자 를 자주 볼 수 있 습 니 다.이런 화면 들 은 사용자 체험 이 많이 향상 되 기 때문에 오늘 은 이 분야 에 관 한 내용 을 이야기 하 겠 습 니 다.본론 으로 들 어가 서 쓸데없는 말 을 하지 않 겠 습 니 다.먼저 효 과 를 보 여 드 리 겠 습 니 다.먼저 직관 적 인 이 해 를 가지 고 있 습 니 다.위의 그림 에서 보 듯 이 제 테스트 를 통 해이 대화 상 자 는 IE6 78,Firefox,Chrome 등 여러 주류 브 라 우 저 에서 사용 할 수 있 습 니 다.다음은 모두 와 함께 그의 코드 를 봅 시다.우선,우 리 는 브 라 우 저의 유형 을 판단 해 야 합 니 다.여 기 는 몇 개의 bool 변 수 를 사용 하여 서로 다른 브 라 우 저 를 대표 합 니 다.

 
var springweb_typeIsIE = false; 
var springweb_typeIsGecko = false; 
var springweb_typeIsWebkit = false; 
var springweb_typeIsIE6 = false; 
var springweb_typeIsIE7 = false; 
var springweb_typeIsIE8 = false; 
var springweb_typeIsFireFox = false; 
var springweb_typeIsChrome = false; 
var springweb_typeIsSafari = false; 
var agent = window.navigator.userAgent; 
if (agent.indexOf("MSIE 6") != -1) { 
springweb_typeIsIE6 = true; 
springweb_typeIsIE = true; 
} 
else if (agent.indexOf("MSIE 7") != -1) { 
springweb_typeIsIE7 = true; 
springweb_typeIsIE = true; 
} 
else if (agent.indexOf("MSIE 8") != -1) { 
springweb_typeIsIE8 = true; 
springweb_typeIsIE = true; 
} 
else if (agent.indexOf("Firefox") != -1) { 
springweb_typeIsFireFox = true; 
springweb_typeIsGecko = true; 
} else if (agent.indexOf("Chrome") != -1) { 
springweb_typeIsChrome = true; 
springweb_typeIsWebkit = true; 
} 
else if (agent.indexOf("Safari") != -1) { 
springweb_typeIsSafari = true; 
springweb_typeIsWebkit = true; 
} 

위 에서 보 듯 이 에이전트 헤드 검 측 을 통 해 서로 다른 브 라 우 저 를 판단 하 는 것 은 비교적 간단 한 판단 방법 이다.다음은 우리 의 대화 상 자 를 구성 하기 시작 합 니 다.대화 상 자 를 구성 하기 전에 우 리 는 먼저 모드 창의 효 과 를 만들어 야 합 니 다.(대화 상자 가 튀 어 나 올 때 사용 자 는 페이지 의 나머지 내용 을 조작 할 수 없습니다)여기 서 우 리 는 검은색 투명 층 으로 이 효 과 를 완성 합 니 다.

 
document.body.style.overflowY = "hidden"; 
var divBackground = document.createElement("div"); 
divBackground.style.position = "absolute"; 
divBackground.style.left = "0px"; 
divBackground.style.top = "0px"; 
divBackground.style.width = "100%"; 
divBackground.style.height = "100%"; 
if (springweb_typeIsChrome || springweb_typeIsFireFox) { 
　　divBackground.style.backgroundColor = "rgba(0,0,0,0.7)"; 
} else { 
　　divBackground.style.backgroundColor = "#000000"; 
divBackground.style.filter = "alpha(opacity=70)"; 
} 
divBackground.style.zIndex = "99"; 
document.body.appendChild(divBackground); 

위의 코드 는 사용자 가 대화 상 자 를 팝 업 할 때 브 라 우 저 창 을 굴 리 지 않도록 브 라 우 저의 스크롤 바 를 금지 합 니 다.그 다음 에 해당 하 는 스타일 을 설정 합 니 다.하 나 는 8-13 줄 입 니 다.여 기 는 브 라 우 저의 유형 에 따라 서로 다른 CSS 스타일 을 적용 하여 투명 한 효 과 를 얻 습 니 다.IE 브 라 우 저 에 대해 서 는...저 희 는 IE 자체 필터 기능 을 사용 하고 다른 브 라 우 저 에 대해 서 는 CSS 3 기반 rgba 방식 으로 투명 효 과 를 실현 합 니 다.다음 에 우 리 는 대화 상 자 를 만 들 려 고 합 니 다.여기 서 먼저 div 층 을 만들어 서 우리 의 전체 대화 상 자 를 대표 합 니 다.방법 은 다음 과 같다.

 
var dialogWidth = 260; 
var dialogHeight = 120; 
var fontSize = 14; 
var lineWidth = document.body.clientWidth * 0.7; 
if ((fontSize * msg.length) < lineWidth) { 
dialogWidth = parseInt(fontSize * msg.length) + 50; 
} else { 
dialogWidth = parseInt(lineWidth); 
dialogHeight += parseInt(((fontSize * msg.length) / lineWidth) * fontSize); 
} 
divDialog.style.width = dialogWidth + "px"; 
divDialog.style.height = dialogHeight + "px"; 
divDialog.style.position = "absolute"; 
divDialog.style.border = "1px solid #C0D7FA"; 
divDialog.style.borderRight = "2px outset #DEDEDE"; 
divDialog.style.borderLeft = "2px outset #DEDEDE"; 
divDialog.style.left = ((document.body.clientWidth / 2) - (dialogWidth / 2)) + "px"; 
divDialog.style.top = ((document.body.clientHeight / 2) - (dialogHeight / 2)) + "px"; 
divDialog.style.zIndex = "100"; 

여기 서 먼저 메시지 의 글자 수 에 따라 대화 상자 의 사 이 즈 를 계산 했다.다음은 대화 상자 의 제목 표시 줄 을 만 듭 니 다.대화 상자 의 제목 을 표시 하고 대화 상자 의 드래그 동작 을 수행 합 니 다.

 
var divHead = document.createElement("div"); 
if (title != undefined) { 
divHead.innerHTML = title; 
} else { 
divHead.appendChild(document.createTextNode("  ")); 
} 
divHead.style.width = "100%"; 
divHead.style.height = "25px"; 
divHead.style.lineHeight = "25px"; 
divHead.style.fontSize = "14px"; 
divHead.style.fontWeight = "bold"; 
divHead.style.borderBottom = "1px outset #8989FF"; 
divHead.style.color = "white"; 
divHead.style.textIndent = "10px"; 
divHead.style.backgroundColor = "blue"; 
divHead.style.backgroundImage = "url('" + springweb_basePath + "/images/headbg.png')"; 
divHead.style.cursor = "move"; 
divHead.onmousedown = function() { 
divDialog.dragging = true; 
}; 
divHead.onmouseup = function() { 
divDialog.dragging = false; 
}; 
document.body.onmousemove = function(e) { 
if (!divDialog.dragging) return; 
e = e || window.event; 
var mouseX, mouseY; 
var mouseOffsetX, mouseOffsetY; 
if (e.pageX || e.pageY) { 
mouseX = e.pageX; 
mouseY = e.pageY; 
} else { 
mouseX = 
e.clientX + document.body.scrollLeft - 
document.body.clientLeft; 
mouseY = 
e.clientY + document.body.scrollTop - 
document.body.clientTop; 
} 
divDialog.style.left = (mouseX - dialogWidth * 0.4) + "px"; 
divDialog.style.top = (mouseY - 10) + "px"; 
}; 
divDialog.appendChild(divHead); 

여 기 는 마우스 누 르 기와 팝 업 이벤트 입 니 다.div 대상 에 게 dragging 속성 을 하나 더 추가 하여 대화 상자 가 끌 리 고 있 는 지 여 부 를 나타 내 는 데 사 용 됩 니 다.(이것 도 JS 의 특성 중 하나 입 니 다.object 형식의 대상 에 게 새로운 속성 을 지정 하 는 방법 입 니 다.이전 대상 에 게 이 속성 이 없 었 다 면,대상 이름.속성 명='값'방식 으로 대상 에 게 새로운 속성 을 추가 할 수 있 습 니 다)마우스 이동 이벤트 에서 우 리 는 대상 의 dragging 속성 을 통 해 대화 상 자 를 이동 할 지 여 부 를 결정 합 니 다.대화 상자 의 이동 위치 에 대해 서 는 게 으 름 을 피 웠 습 니 다~대화 상자 와 마우스 의 상대 위 치 를 판단 하지 않 고 상수 로 주 었 습 니 다.이렇게 드래그 를 시작 할 때마다...대화 상 자 는 약간'순간 이동'합 니 다.관심 있 는 친구 가 보완 해 줄 수 있 습 니 다.하하.마지막 으로 대화 상자 내용 영역 생 성:

 
var divContent = document.createElement("div"); 
divContent.style.textAlign = "center"; 
divContent.style.padding = "15px"; 
divContent.style.fontSize = "12px"; 
if (springweb_typeIsIE) { 
divContent.style.height = parseInt(dialogHeight - 25) + "px"; 
} else { 
divContent.style.height = parseInt(dialogHeight - 55) + "px"; 
} 
divContent.style.backgroundColor = "#ffffff"; 
if (springweb_typeIsIE6 || springweb_typeIsIE7 || springweb_typeIsIE8) { 
divContent.style.filter = 
"progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#FFFFFF,endColorStr=#C2E2F8)"; 
} else if (springweb_typeIsFireFox) { 
divContent.style.backgroundImage = 
"-moz-linear-gradient(left,rgba(255,255,255,1),rgba(194,226,248,1))"; 
} else if (springweb_typeIsWebkit) { 
divContent.style.backgroundImage = 
"-webkit-gardient(linear,0% 0%,100% 100%,from(#FFFFFF),to(#000000))"; 
} 
divContent.innerHTML = msg + "<br /><br />"; 
divDialog.appendChild(divContent); 
var closeButton = document.createElement("img"); 
closeButton.style.cursor = "hand"; 
closeButton.setAttribute("src", springweb_basePath + "/images/okButton.png"); 
closeButton.setAttribute("alt", "  "); 
//the click event when the dialog is closing. 
closeButton.onclick = function() { 
document.body.removeChild(divBackground); 
document.body.removeChild(divDialog); 
document.body.style.overflowY = ""; 
}; 
divContent.appendChild(closeButton); 
divDialog.focus(); 
document.body.appendChild(divDialog); 

여 기 는 더 이상 설명 할 필요 가 없 을 것 같 습 니 다.조금 만 말씀 드 리 겠 습 니 다.바로 13-22 줄 의 코드 입 니 다.이것 은 브 라 우 저 에 따라 그 라 데 이 션 효 과 를 각각 실현 하 는 것 입 니 다.IE 의 경우 마이크로소프트 로 제공 하 는 그 라 데 이 션 입 니 다.웹 킷 이나 Gecko 커 널 의 브 라 우 저 는 해당 CSS 3 기준 을 사용 해도 그 라 데 이 션 효 과 를 낼 수 있다.마지막 으로 이 방법 은 대부분의 브 라 우 저 를 지원 합 니 다.개별 브 라 우 저가 완전히 지원 되 지 않 는 다 면 양해 해 주 십시오.여러분 들 이 더욱 완벽 한 방법 으로 함께 토론 하 기 를 기대 합 니 다.다음은 예시 입 니 다.관심 있 는 분 들 은 보 실 수 있 습 니 다.전재 출처 를 밝 혀 주세요~예제 파일:JS 대화 상자 구현