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

$(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()라는 점에 유의해야 합니다.