js_javascript 기술로 구현된 사용자 정의 대화 상자의 구현 코드

안녕하세요 여러분, 우리는 일반적으로 Javascript를 사용할 때 사용자에게 피드백 정보를 제공해야 하는 경우가 많습니다. 이 기능을 완료하는 방법에는 여러 가지가 있습니다. 하지만 일반적인 개발에서는 아마도 우리가 가장 많이 사용하는 기능이 경고 기능일 것입니다(여기서는 일반적인 상황만 언급하고 개별 전문가도 제외되지 않습니다~). 이 기능을 사용하면 정말 편리하고 사용자에게 일부 대화형 정보를 쉽게 제공할 수 있습니다. 사용자. 그러나 단점도 많습니다. 예를 들어, 외관이 매우 단순하고 제어가 불가능합니다. 또한 각 브라우저 자체에서 구현되는 브라우저 수준의 기능이므로 다른 브라우저에서 사용할 수 없습니다. 모두 다릅니다. 과거에는 대부분의 사용자가 이러한 상황을 쉽게 받아들였을지 모르지만, 시간이 지남에 따라 사용자는 점점 더 나은 경험을 원하게 됩니다. 이제 많은 웹사이트에서 JS로 만든 다양한 대화 상자를 자주 볼 수 있습니다. 이러한 인터페이스는

사용자 경험을 많이 향상시키므로 오늘은 이 측면에 대해 이야기하겠습니다. ~

먼저 직관적으로 이해할 수 있도록 효과를 보여드리겠습니다.


위 그림과 같이 테스트를 마친 후 이 대화 상자를 사용할 수 있습니다. IE6 7 8, Firefox, Chrome 및 기타 주류 브라우저. 모두와 함께 그의 코드를 살펴보겠습니다.
먼저 브라우저 유형을 결정해야 합니다. 여기서는 다양한 브라우저를 나타내기 위해 여러 가지 bool 변수가 사용됩니다.



코드 복사

코드는 다음과 같습니다. var springweb_typeIsIE = var; springweb_typeIsGecko = false ;

var springweb_typeIsWebkit = false;

var springweb_typeIsIE7 = false;
var springweb_typeIsSafari =
var 에이전트 = 창 .navigator.userAgent;
if (agent.indexOf("MSIE 6") != -1) {
springweb_typeIsIE6 =
springweb_typeIsIE =
}
else if (에이전트 .indexOf("MSIE 7") != -1) {
springweb_typeIsIE7 = true;
springweb_typeIsIE =
}
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 =
}
else; Agent.indexOf("Safari") != -1) {
springweb_typeIsSafari = true;
springweb_typeIsWebkit =
}


위와 같이 브라우저에 따라 판단됩니다. 에이전트 헤더를 감지하는 것은 비교적 간단한 판단 방법입니다.
대화 상자 구성을 시작해 보겠습니다. 대화 상자를 구성하기 전에 먼저 모달 형식의 효과를 만들어야 합니다(즉, 대화 상자가 팝업되면 사용자가 페이지의 나머지 콘텐츠를 조작할 수 없습니다). , 여기서는 이 효과를 얻기 위해 검정색 투명 레이어를 사용합니다.




코드 복사

코드는 다음과 같습니다.

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 = "알파( opacity=70 )";
}
divBackground.style.zIndex = "99";
document.body.appendChild(divBackground);


위 코드에서 우리는 먼저 브라우저를 추가하십시오. 대화 상자가 나타날 때 사용자가 브라우저 창을 스크롤하는 것을 방지하기 위해 스크롤 막대가 비활성화됩니다. 다음으로, 해당 스타일 중 하나는 8-13행입니다. 투명한 효과를 내기 위해 IE 브라우저에서는 IE에서 제공하는 필터 기능을 사용하고, 다른 브라우저에서는 투명한 효과를 얻기 위해 CSS3 기반의 rgba 방식을 사용합니다.
다음으로 대화 상자를 구성해야 합니다. 여기에서는 먼저 전체 대화 상자를 나타내는 div 레이어를 만듭니다. 방법은 다음과 같습니다.




코드 복사

코드는 다음과 같습니다

varDialogWidth = 260;
var 대화 상자 높이 = 120;
var 글꼴 크기 = 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 = 대화상자 높이 "px";
divDialog.style.position = "절대";
divDialog.style.border = "1px 단색 #C0D7FA";
divDialog.style.borderRight = "2px 시작 #DEDEDE";
divDialog.style.borderLeft = "2px 시작 #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";

　　这里, 首先根据消息的字数计算了对话框的尺寸（这里的计算方法은 통일되지 않았습니다.方法还望大家指教) ，后면那些DOM代码就나는 더 많은 것을 사용하지 않습니다.话框的拖动操작품。

复代码码 代码如下:

var divHead = document.createElement("div");
if (제목 != 정의되지 않음) {
divHead.innerHTML = 제목;
} else {
divHead.appendChild(document.createTextNode("消息"));
}
divHead.style.width = "100%";
divHead.style.height = "25px";
divHead.style.lineHeight = "25px";
divHead.style.fontSize = "14px";
divHead.style.fontWeight = "굵게";
divHead.style.borderBottom = "1px 시작 #8989FF";
divHead.style.color = "흰색";
divHead.style.textIndent = "10px";
divHead.style.BackgroundColor = "파란색";
divHead.style.BackgroundImage = "url('" springweb_basePath "/images/headbg.png')";
divHead.style.cursor = "이동";
divHead.onmousedown = function() {
divDialog.draging = true;
};
divHead.onmouseup = function() {
divDialog.draging = false;
};
document.body.onmousemove = function(e) {
if (!divDialog.draging) return;
e = e || 창.이벤트;
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);

　　这里呢,有必要说一下的就是,鼠标按下 and弹起事件,这里给div对象多增加了一个 dragging 属性, 用来代表对话框是否拦拖动中（这也是JS의 특별한 성지 1, 对객체는 새로운 유형의 단일 방법을 정의합니다.可以为对象增加新属性) ,이제 标移动事件中, 우리는 일반적으로 끌기 기능을 사용하고 있으며, 否移动对话框, 关于对话框的移动位置, 这里我偷懒了~没 있습니다判断对话框와鼠标的对位置，而是给了一个常weight，这样每次开始拖动时，对话框会稍微"瞬移"一下，有兴趣的朋友可以帮忙完善一下，呵呵。
　　最后，是关于对话框内容区域的创建：

复代码 代码如下:

var divContent = document.createElement("div");
divContent.style.textAlign = "중심";
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 "

";
divDialog.appendChild(divContent);
var closeButton = document.createElement("img");
closeButton.style.cursor = "손";
closeButton.setAttribute("src", springweb_basePath "/images/okButton.png");
closeButton.setAttribute("alt", "确정");
//대화상자가 닫힐 때의 클릭 이벤트입니다.
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的话，用微软提供的渐变，Webkit은 Gecko의 浏览器使用数数浏를 지원합니다.览器，个别浏览器如果不能完全支持，还请各位见谅，期待大家有更加完善적 방법 一起讨论,下면是一个示例,有兴趣的朋友可以看看。转载请注出处~ 示例文件：
JS对话框实现

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.