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对话框实现

관련 라벨：

javascript 대화 상자

원천：php.cn

이전 기사：JavaScript 완벽 종료 테스트 및 Answers_javascript 기술 다음 기사：Sharp jQuery 3장 요약 example_jquery

본 웹사이트의 성명

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

저자별 최신 기사

• NullPointerException은 무엇이며 어떻게 해결합니까?
  2024-10-22 09:46:29
• 초보자에서 코더까지: C 기초로 시작되는 여정
  2024-10-13 13:53:41
• PHP로 웹 개발 잠금 해제: 초보자 가이드
  2024-10-12 12:15:51
• C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길
  2024-10-11 22:47:31
• 코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍
  2024-10-11 19:36:51
• 내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C
  2024-10-11 15:50:41
• C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구
  2024-10-11 15:07:41
• PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계
  2024-10-11 14:21:21
• Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드
  2024-10-11 12:59:11
• 코딩의 핵심: 초보자를 위한 Python의 힘 활용
  2024-10-11 12:17:31

최신 이슈

JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}

에서 2024-04-06 19:25:49

0

1

505

d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...

에서 2024-04-06 18:16:26

0

1

403

공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...

에서 2024-04-06 15:35:24

0

1

274

Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...

에서 2024-04-06 14:54:03

0

2

421

CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...

에서 2024-04-06 12:53:11

0

1

376

관련 주제

더>

• js에서 배열의 길이를 얻는 방법
• js 현재 페이지 새로 고침
• JS 반올림
• 노드를 삭제하는 Node.js 메소드
• 자바스크립트 이스케이프 문자
• js에서 난수를 생성하는 방법
• JavaScript를 활성화하는 방법
• JS의 Symbol 클래스에 대한 자세한 설명