동일 페이지에서 로그인, 일부 작업 등 팝업 레이어에 대한 응용 프로그램이 여전히 많이 있습니다. 레이어 플러그인. 더 이상 고민하지 말고 시작해 보세요!
1: 마스크 레이어
레이어를 팝업하려면 먼저 마스크 레이어를 사용하여 아래 페이지를 차단해야 합니다. 이 마스크 레이어는 전체 화면이고 페이지를 스크롤해야 하므로 위치를 고정합니다. 여기에도 투명 효과가 있습니다. 내 정의 마스크 레이어 CSS의 이름은 마스크입니다
.마스크
{
위치: 고정;
너비: 100%;
높이: 100%;
배경색: 흰색;
오버플로: 스크롤;
필터: 알파(불투명도=50);
-moz-불투명도: 0.5;
불투명도: 0.5;
Z-색인: 20;
오버플로: 자동;
상단: 0px;
오른쪽: 0px;
}
2: 플러그인의 주요 매개변수
태그: 태그가 왜 필요한가요? 태그를 사용하여 팝업되어야 하는 숨겨진 요소를 지정할 수 있습니다. 태그를 선택기 "#*"로 지정하면 지정된 요소가 팝업될 수 있습니다. 여기서는 기본값을 이것으로 설정했습니다.
mainContent: 이 매개변수가 필수인가요? 별로 유용하지 않을 것 같습니다. 주로 서버 컨트롤용으로 설정했습니다. 모두 본문에 추가하면 양식을 제출할 수 없습니다. 그런데 제출을 누르면 페이지가 새로고침되고 팝업레이어도 사라지기 때문에 아직은 쓸데없는 것 같아요...
$.fn.xsPop = 기능(옵션) {
var defaults = {//기본값
제목: "팝업 창", //창 제목
너비: 500,
키: 400,
태그: this, //로드해야 하는 요소 팝업
닫기: "닫기",
mainContent: "body"//Container, 양식을 제출하기 위한 것이지만 제출하면 페이지가 새로 고쳐집니다...
};
var options = $.extend(defaults, options); //전달된 매개변수로 재정의
This.each(함수 () {
xsMain(options.title, options.width, options.heigth, options.tag, options.close, options.mainContent); //플러그인의 기본 입구
});
};
3: xsMain 함수를 사용하여 요소를 추가하고 이벤트를 바인딩합니다.
여기서 높이와 너비를 조절하는 프로세스가 있습니다. 설정이 화면 높이와 너비를 초과하면 화면에 맞게 조정되어 팝업 레이어가 너무 커서 작동하지 않는 것을 방지합니다. 다른 하나는 일반적인 html 추가인데 저는 문자열 추가를 사용합니다
//들어오는 데이터에 따라 마스크 레이어를 추가하고 프롬프트 상자를 팝업합니다
함수 xsMain(제목, 너비, 높이, 태그, 닫기, mainContent) {
var divmask = "
";
$(mainContent).append(divmask);
var xsPop1 = " ";
var allHtml = xsPop1 xsPop2 xsPop3 xsPop5;
$(mainContent).append(allHtml);
$(tag).show();
$(tag).appendTo("#xsPopMain");
//브라우저의 높이와 너비를 구해 후속 판단(높이 초과, 테두리 제한 끌기)
클라이언트 높이 = window.screen.height;
clientWidth = window.screen.width;
If (높이 > clientHeight) {
높이 = 클라이언트 높이 - 100;
}
If (너비 > clientWidth) {
너비 = clientWidth - 100;
}
$("#xsPop").css({
"heigth": 높이 "px",
"너비": 너비 "px",
"margin-top": "-" (높이 / 2) "px",
"margin-left": "-"(너비 / 2) "px"
});
$("#xsPopMain").css("height", height - $("#xsPopHead").height());
xsdrag("#xsPopHead", "#xsPop") //드래그 동작 바인딩
$("#xsColse").bind("click", function () { ClosePop(tag, mainContent); }) //바인딩 닫기 작업
}
4: 닫기 동작
여기서 먼저 컨테이너에 태그를 주어야 합니다. 그렇지 않으면 나중에 제거할 때 함께 제거되고, 두 번째 팝업에서는 태그를 찾을 수 없습니다.
//팝업 레이어 닫기
함수 ClosePop(태그, mainContent) {
$(mainContent).append(tag); //저장합니다. 그렇지 않으면 4단계의 $("#xsPop").remove()가 태그를 삭제합니다
$(tag).hide();
$(".mask").remove();
$("#xsPop").remove();
}
5: 드래그 효과
방법 1: 처음 발견한 것은 요소를 활용한 이벤트인데 요소가 흩어지기 쉽고 효과도 이상적이지 않습니다
코드 복사 코드는 다음과 같습니다.
//팝업 레이어 드래그 앤 드롭(방법 실패, 개체 손실 발생)
//컨트롤은 드래그 요소, 태그는 액션 요소, 일반적으로 컨트롤은 태그 내에 있습니다
// 함수 드래그(컨트롤, 태그) {
// // var isMove = false;
// var abs_x = 0, abs_y = 0;
// // $(control).mousedown(
// // 함수(이벤트) {
// // var top = $(tag).offset().top;
// // var left = $(tag).offset().left;
// abs_x = event.pageX - 왼쪽;
// // abs_y = event.pageY - top;
// // isMove = true;
}).mouseleave(함수 () {
// // isMove = false;
// // });
// // $(control).mouseup(function () {
// // isMove = false;
// // });
// // $(document).mousemove(함수 (이벤트) {
// // if (isMove) {
// // $(태그).css({
// // '왼쪽': event.pageX - abs_x $(tag).width() / 2 - 1,
// // '상단': event.pageY - abs_y $(tag).height() / 2 - 1
// //
// // }
// // false를 반환합니다.
// // });
// }
현재 제가 사용하고 있는 방법 2번은 문서의 위, 아래를 사용하는 방식인데, 여전히 문제가 있고, 너무 빠르게 이동하는 문제와 좌표가 조금 튀는 현상이 있습니다
저도 문제점을 발견했습니다. 팝업 레이어를 화면 상단으로 직접 드래그해서 놓으면, ㅎㅎ 절대 뒤로 드래그하거나 클릭해서 닫을 수 없습니다. 바이두 홈페이지에서 팝업레이어를 살펴보니 이런 현상이 있는데 창을 확대했다가 축소하면 팝업레이어가 중앙으로 돌아옵니다. 저도 이렇게 해봤는데 onresize를 바인딩하면 아래쪽으로 이동이 안되는 현상이 나오네요. 확실히 onresize가 아닌 이벤트라서 마우스 위치가 0보다 작을 수 없다고 직접 판단했습니다.
코드 복사 코드는 다음과 같습니다.
//팝업 레이어 드래그 앤 드롭
//컨트롤은 드래그 요소, 태그는 액션 요소, 일반적으로 컨트롤은 태그 내에 있습니다
함수 xsdrag(컨트롤, 태그) {
$(control).mousedown(function (e)//emouse 이벤트
{
var offset = $(this).offset() //페이지에서의 DIV 위치
var x = e.pageX - offset.left //마우스 포인터와 DIV 요소의 왼쪽 테두리 사이의 거리를 가져옵니다.
var y = e.pageY - offset.top; //마우스 포인터와 DIV 요소의 위쪽 경계 사이의 거리를 가져옵니다.
$(document).bind("mousemove", function (ev)//마우스 이동 이벤트를 바인딩합니다. 커서는 DIV 요소 외부에도 영향을 주어야 하기 때문에 DIV 요소 이벤트 대신 문서 이벤트를 사용해야 합니다.
{
If (EV.Pagey & Lt; = 0) {Return;} // 프레임을 닫고 드래그할 수 없는 현상 방지
$(tag).css({
'left': ev.pageX - x $(tag).width() / 2, // 이것을 내 레이아웃에 추가해야 합니다
'top': ev.pageY - y $(tag).height() / 2
});
});
});
$(문서).mouseup(함수 () {
$(this).unbind("mousemove");
});
}
6: 스타일 시트
팝업 레이어의 레이아웃은 위쪽 및 왼쪽 여백-상단 음수 값을 사용하므로 js에 높이와 너비의 절반을 추가합니다.
.마스크
{
위치: 고정;
너비: 100%;
높이: 100%;
배경색: 흰색;
오버플로: 스크롤;
필터: 알파(불투명도=50);
-moz-불투명도: 0.5;
불투명도: 0.5;
Z-색인: 20;
오버플로: 자동;
상단: 0px;
오른쪽: 0px;
}
.팝업
{
패딩: 0px;
위치: 절대;
z-색인: 21 !중요;
배경색: 흰색;
테두리 스타일: solid solid solid solid;
테두리 너비: 1px;
테두리 색상: #C0C0C0;
왼쪽: 50%;
최고: 50%;
}
.팝헤드
{
배경색: #F0F0F0;
테두리 하단 스타일: 단색;
테두리 하단 너비: 1px;
테두리 하단 색상: #C0C0C0;
높이: 30px;
커서: 이동;
클립: 직사각형(0px, 자동, 자동, 0px);
}
.팝헤드b
{
부동: 왼쪽;
디스플레이: 블록;
색상: #C0C0C0;
글꼴 계열: 시스템;
글꼴 크기: 중간;
줄 높이: 30px;
텍스트 들여쓰기: 2em;
}
.팝헤드 스팬
{
플로트: 그렇죠;
디스플레이: 블록;
텍스트 정렬: 오른쪽;
줄 높이: 30px;
커서: 포인터;
텍스트 들여쓰기: 5px;
색상: #FF0000;
글꼴 크기: 12pt;
}
.팝메인
{
패딩: 10px;
오버플로: 자동;
}
7: 페이지 사용
테스트 서버 컨트롤에서 양식을 제출할 수 있습니다
$(document).ready(function () {
$("#btnPop").click(function () {
var 옵션 = {
제목: "마이 팝",
너비: 500,
키: 400,
닫기: "닫기",
mainContent: "양식"
}
$("#pop1").xsPop(옵션);
});
});
그렇습니다. 원래 테두리 풀을 만들어 크기를 변경하려고 했는데 시간이 좀 걸릴 것 같아 중단했습니다. 사실 솔직히 말해서 드래그하는 것도 별 의미가 없고 테두리 컨트롤 크기도 별 의미가 없다고 생각합니다. 오버플로를 설정하면 스크롤 막대가 나타나기 때문입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
