jQuery DIV 팝업 효과 구현 code_jquery

우선 닫기 버튼을 클릭하거나 마스크 레이어의 아무 곳이나 클릭하여 팝업 레이어를 닫을 수 있습니다.

HTML 코드

코드 복사 코드는 다음과 같습니다.

제목 위치

텍스트 콘텐츠

>< ;/div>

코드가 매우 간결합니다. 가장 바깥쪽 레이어는 팝업 레이어의 컨테이너인 큰 DIV, 팝업 레이어의 제목인 H4, 팝업 레이어의 텍스트 콘텐츠를 표시하는 또 다른 DIV, 일부 버튼을 배치하는 또 다른 DIV입니다.

CSS 코드

코드 복사 코드는 다음과 같습니다.

.pop-box {

z-index: 9999; /*이 값은 상단에 표시될 만큼 커야 합니다.*/
margin-bottom: 3px
display: none; 🎜>위치: 절대;
배경: #FFF;
경계:solid 1px #6e8bde
}

.pop-box h4 {
색상:
cursor:default ;
높이: 18px;
font-weight:bold; 텍스트 정렬:
padding-left; >padding-top: 4px;
padding-bottom: 2px;
배경: url("../images/header_bg.gif") 반복-x 0 0; .pop-box -body {
지우기: 둘 다
여백: 4px;
패딩:
}



JS 코드
🎜>



코드 복사

코드는 다음과 같습니다.
function popupDiv(div_id) {

var div_obj = $("#" div_id); var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = div_obj.height(); popupWidth = div_obj.width() ; //마스크 레이어 추가 및 표시$("

").addClass("mask") .width(windowWidth * 0.99)

.height(windowHeight * 0.99)

.click(function() {hideDiv(div_id); })
.appendTo("body")
. fadeIn(200);
div_obj.css({"position": "absolute"})
.animate({left: windowWidth/2-popupWidth/2,
top: windowHeight/2-popupHeight/ 2, 불투명도: "표시" }, "느림");

function hideDiv(div_id) {
$("#mask").remove(); "#" div_id).animate ({왼쪽: 0, 위쪽: 0, 불투명도: "숨기기" }, "느림")
}

성명：

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