JavaScript_javascript 스킬을 기반으로 팝업박스 효과 구현-JS 튜토리얼-php.cn

JavaScript_javascript 스킬을 기반으로 팝업박스 효과 구현

WBOY

풀어 주다： 2016-05-16 15:14:47

원래의

1973명이 탐색했습니다.

팝업 상자는 웹 사이트 페이지에서 없어서는 안될 부분입니다. 오늘은 Script House 플랫폼의 도움으로 간단한 팝업 상자 효과를 얻기 위해 js를 사용하는 방법을 알려 드리겠습니다. 써놨으니 용서해주세요!

먼저 팝업 상자의 구성 요소를 분석해 보겠습니다. 간단한 팝업 상자는 헤드, 콘텐츠, 꼬리로 구분되며, 헤드에는 제목과 닫기 버튼이 있으며 콘텐츠는 그래픽, 미디어, iframe, flash 등이 있고 꼬리가 버튼(확인, 취소 등)이므로 이 예제에서는 주로 팝업 상자의 핵심 부분을 구현합니다. >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body, div{
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
}
.pop {
border-radius: 5px;
background-color: #fff;
border: #eee 1px solid;
position: absolute;
width: 350px;
left: 35%;
top: 25%;
}
.pop-title {
background-image: linear-gradient(#eee,#efefef);
position: relative;
cursor: pointer;
}
.pop-title h3,.pop-title a{
display: inline-block;
}
.pop-title h3{
font-size: 14px;
margin: 0;
padding: 5px;
}
.pop-title a {
position: absolute;
top: 5px;
right: 5px;
}
.pop-content {
padding: 10px;
}
</style>
</head>
<body>
<div>
<div>
<h3>消息</h3>
<a href="javascript:;">X</a>
</div>
<div>
弹出框已显示
</div>
<div></div>
</div>
</body>
</html>

로그인 후 복사

머리를 누르면 이동 모드가 켜지고, 머리를 떼면 이동이 금지되는 팝업 상자가 나타납니다. 물론 논리는 비교적 간단합니다.

여기서는 이동의 X 및 Y 좌표, 이동의 전환 및 금지 등 여러 변수를 생각할 수 있습니다. 그런 다음 제목에 onmousedown 및 onmouseup 이벤트를 추가합니다.

onmousedown 이벤트는 주로 움직임을 시작합니다.

onmouseup 이벤트의 논리는 주로 움직임을 닫고 팝업 상자의 움직임을 비활성화하는 것입니다.

그럼 움직여야 하고, 움직여야 할 때는 일정 범위 내에서 움직여야 합니다. 여기서는 몸체 내부에서 onmousemove 이벤트를 추가합니다. 팝업박스 위치

이 세 가지 이벤트는 주로 CSS의 위치 속성과 JS의 이벤트 이벤트 속성 좌표를 결합합니다.

var pop = document.getElementsByClassName("pop")[0];
var pop_title = pop.getElementsByClassName("pop-title")[0];
var bd = document.body;
var x = 0;
var y = 0;
var ismove = false; // 是否开启移动
var downx = 30;
var downy = 30;
pop_title.onmousedown = function (e) {
x = e.pageX;
y = e.pageY;
downx = e.offsetX;
downy = e.offsetY;
ismove = true;
}
bd.onmousemove = function (e) {
if (ismove) {
var cx = e.pageX - downx;
var cy = e.pageY - downy;
pop.style.left = cx + "px";
pop.style.top = cy + "px";
x = e.x;
y = e.y;
}
e.preventDefault();
}
pop_title.onmouseup = function (e) {
x = e.pageX;
y = e.pageY;
ismove = false;
console.log("移动完成")
}

로그인 후 복사

팝업박스 이동 후 닫기 버튼에 닫기 이벤트를 추가합니다.

//关闭 
var pop_close = pop.getElementsByClassName("pop-close")[0];
pop_close.onclick = function () {
pop.parentNode.removeChild(pop);
}

로그인 후 복사

그렇습니다. 동일한 코드를 자체적으로 최적화하고 캡슐화할 수 있으며, 호환성 문제는 직접 처리해야 할 수도 있습니다(IE9 이전 버전). >

이상으로 js를 이용한 팝업박스 효과를 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

JavaScript_javascript 스킬을 기반으로 팝업박스 효과 구현