집 >웹 프론트엔드 >JS 튜토리얼 >jQuery는 클릭 버튼 마스크 팝업 대화 상자를 구현합니다(Tmall의 삭제 대화 상자 모방)_jquery

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

WBOY원래의: 2016-05-16 16:52:551314검색

티몰에서 쇼핑할 때 삭제 버튼이나 로그인 버튼을 클릭하면 삭제 여부를 묻는 대화 상자가 나타나거나 로그인 대화 상자가 나타나는 경우가 종종 있으며, 이전 페이지의 정보도 볼 수 있습니다. , 아니요를 클릭하면 대화 상자에서 작업한 후에만 해당 변경 사항이 적용됩니다. 스크린샷은 다음과 같습니다(Tmall을 예로 들어요)
jQuery는 클릭 버튼 마스크 팝업 대화 상자를 구현합니다(Tmall의 삭제 대화 상자 모방)_jquery
사진에서 보듯이 위의 내용은 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()라는 점에 유의해야 합니다.

성명：

이전 기사：JS는 replacement() 메소드와 정규 표현식을 사용하여 strings_javascript 기술을 검색하고 바꿉니다.다음 기사：JS는 replacement() 메소드와 정규 표현식을 사용하여 strings_javascript 기술을 검색하고 바꿉니다.

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

관련 기사