jQuery는 클릭 버튼 마스크 팝업 대화 상자를 구현합니다(Tmall의 삭제 대화 상자 모방)_jquery

티몰에서 쇼핑할 때 삭제 버튼이나 로그인 버튼을 클릭하면 삭제 여부를 묻는 대화 상자가 나타나거나 로그인 대화 상자가 나타나는 경우가 종종 있으며, 이전 페이지의 정보도 볼 수 있습니다. , 아니요를 클릭하면 대화 상자에서 작업한 후에만 해당 변경 사항이 적용됩니다. 스크린샷은 다음과 같습니다(Tmall을 예로 들어요)

사진에서 보듯이 위의 내용은 Tmall의 렌더링인데 사실 이는 jQuery를 통해 구현한 것이지 구현 과정은 아닙니다. 매우 복잡합니다. 이제 구현 과정을 살펴보겠습니다.

첫 번째는 페이지의 레이아웃 부분입니다: delete.html

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

마스크 팝업

< ;meta http -equiv="keywords" content="keyword1,keyword2,keyword3">
-equiv= "content-type" content="text/html; charset=UTF-8">

삭제할 수 있는 기록입니다

< div class="mask">

"확인하려면 클릭하세요." src="../images/delete.gif" width="30px" height="30px;">
삭제 시 확인

div class=" content">

정말로 이 기록을 삭제하시겠습니까?

;/div>





참고로 레코드는 하나만 추가했지만 실제로는 여러 삭제를 시뮬레이션할 수 있습니다. 기록의. 여기에는 마스크와 대화 상자를 사용하여 jquery를 통해 트리거할 수 있는 3계층 div 구조가 있습니다. 다음으로 CSS의 레이아웃에 대해 이야기하겠습니다. 먼저 delete.html

코드 복사

코드는 다음과 같습니다. @CHARSET "UTF-8" *{ margin : 0px; 패딩: 0px;

}
.divShow{
줄 높이: 32px;
배경 색상:
너비: 280px;
여백: 10px;
}



.dialog{
너비: 360px
테두리: 1px #666 ;
위치: 절대;
display: 없음;
z-index: 101; // 이 레이어가 맨 위에 표시되는지 확인
}

.title{
배경:#fbaf15
패딩: 10px;
색상: #fff;
글꼴 두께: 굵게

.title img {
float:right;
}

.dialog .content{

배경: #fff
높이: 60px; >}

.dialog .content img{
float: 왼쪽;
}
.dialog .content 범위{
float:
padding: 10px; >
}


.dialog .bottom{

text-align: 오른쪽
padding: 10 10 10 0
배경: #eee; 🎜>}

.mask{

너비: 100%;
높이: 100%;
위치: 절대
: 0px;
왼쪽: 0px;
표시: 없음;
z-색인: 100;

btn{

경계: 단색;
너비: 65px

}


CSS 파일에서 제가 주목해야 할 점은 z-index의 사용입니다. z-index는 레이어의 쌓인 순서를 나타내며 값이 높을수록 상위 레이어에 표시된다는 의미입니다. 마스크의 z-index는 100입니다. 대화상자의 z-index는 100입니다. z-index는 101입니다. 값이 충분히 큰 이유는 반드시 최상위 수준에 표시되도록 하기 위함입니다. 값을 늘려 div 레이어 표시를 제어할 수 있습니다.

다음 단계는 가장 중요한 js 코드입니다. 물론 jquery를 사용할 때는 jquery 패키지를 가져와야 합니다.

delete.js

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

$(function(){

//삭제 버튼의 트리거 이벤트 바인딩
$("#button1").click(function (){

$(".mask").css("opacity","0.3").show()
showDialog()
$(".dialog"); show();
} );

/*
* 스크롤 막대의 현재 페이지 위치에 따라 프롬프트 대화 상자의 상단과 왼쪽을 설정합니다.
*/
function showDialog(){
var objw= $(window);//현재 창
var objc=$(".dialog");//현재 대화 상자
var brsw=objw.width ();
var brsh=objw.height( );
var sclL=objw.scrollLeft()
var sclT=objw.scrollTop(); ;
var curh=objc.height();
//대화상자가 중앙에 있을 때 왼쪽 여백 계산
var left=sclL (brsw -curw)/2
var top=sclT (brsh-curh)/2;

/ /대화 상자를 가운데로 설정
objc.css({"left":left,"top":top})

}

//페이지 창 크기가 변경될 때 발생 이벤트
$(window).resize(function(){

if(!$(".dialog").is( ":visible")){
return;
}
showDialog()
})

//이미지 닫기 클릭 이벤트 등록
$(". title img").click(function(){

$(".dialog").hide();
$(".mask").hide();

});
//버튼 이벤트 취소
$( "#noOk").click(function(){
$(".dialog").hide();
$(". 마스크").hide();
});

//확인 버튼 나가기
$("#ok").click(function(){

$( ".dialog").hide();
$(" .mask").hide();

if($("input:checked").length !=0){
//필터 선택기 중간에 공백이 있어서는 안 됩니다. $("input :checked") 이것은 잘못된 것입니다

$(".divShow").remove();//삭제 특정 데이터
}

})


}); 🎜>동적 확인 대화 상자 표시 위치에 대한 주체는 showDialog()라는 점에 유의해야 합니다.