JQuery 마스크 레이어 구현(마스크) 구현 code_jquery

지정된 요소에 마스크 레이어와 프롬프트 메시지를 추가하여 고객 경험을 높이는 두 가지 메서드(mask() 및 unmask())가 있습니다. 최근 프로젝트를 진행하면서 이 두 가지 방법을 사용하기 위해 가끔 상대적으로 "큰" Extjs를 도입해야 한다는 사실을 발견했는데, 이것이 약간 비경제적이라고 느껴서 jquery를 사용하여 비교적 간단한 마스크를 구현했습니다. 이 효과를 얻으려면 마스크 해제 방법을 사용하세요. jquery는 크기가 작을 뿐만 아니라 사용하기 쉬운 훌륭한 javascript 프레임워크라는 것은 누구나 알고 있습니다. 이제 시스템에서 Extjs를 사용하여 구현된 모든 코드나 구성 요소를 점차적으로 Jquery로 대체하고 있습니다. 좋아요, 더 이상 고민하지 말고, 여기에 제 코드가 있습니다. 이 코드는 인터넷에서 친구가 구현한 documentMask를 기반으로 수정되었습니다. 더욱 유연하고 편리하게 사용할 수 있습니다.
(기술적 내용 없음, 도움이 필요한 사람들을 돕기 위해 고안됨)

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

(function(){
$.extend($.fn,{
mask: function(msg,maskDivClass){
this.unmask();
// 매개변수
var op = {
불투명도: 0.8,
z: 10000,
bgcolor: '#ccc'
}
var original=$(document.body)
var position={top:0,left:0};
if(this[0] && this[0]!==window.document){
original=this
position=original. position();
}
// 마스크 레이어를 생성하고 객체에 추가합니다.
varmaskDiv=$('

');
maskDiv.appendTo(original);
var 마스크Width=original.outerWidth();
if(!maskWidth){
maskWidth=original.width(); 마스크 높이 =original.outerHeight();
if(!maskHeight){
maskHeight=original.height();
}
maskDiv.css({
위치: '절대',
top: position.top,
왼쪽: position.left,
'z-index': op.z,
width: 마스크Width,
height:maskHeight,
'배경- color ': op.bgcolor,
불투명도: 0
})
if(maskDivClass){
maskDiv.addClass(maskDivClass)
}
if(msg){
var msgDiv=$('

' msg '

');
msgDiv.appendTo(maskDiv);
var widthspace= (maskDiv.width()-msgDiv.width());
var heightspace=(maskDiv.height()-msgDiv.height())
msgDiv.css({
커서:'대기' ,
top:(heightspace/2-2),
left:(widthspace/2-2)
})
}
maskDiv.fadeIn('fast', function() {
// 페이드 인 및 아웃 효과
$(this).fadeTo('slow', op.opacity)
})
return MaskDiv
},
unmask; : function( ){
var original=$(document.body);
if(this[0] && this[0]!==window.document){
original=$(this[0 ]);
}
original.find("> div.maskdivgen").fadeOut('slow',0,function(){
$(this).remove();
});
}
});
})();


다음은 참고용 코드입니다

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

본문{
글꼴 크기:12px;
}

'); .appendTo(original);
varmaskWidth=original.outerWidth();
if(!maskWidth){
maskWidth=original.width()
varmaskHeight=original. externalHeight();
if(!maskHeight){
maskHeight=original.height();
}
maskDiv.css({
position: 'absolute',
top: position.top,
왼쪽: position.left,
'z-index': op.z,
너비: 마스크Width,
높이:maskHeight,
'배경색': op .bgcolor,
불투명도: 0
});
if(maskDivClass){
maskDiv.addClass(maskDivClass)
}
if(msg){
var msgDiv =$('

' msg '

');
msgDiv.appendTo(maskDiv)
var widthspace=(maskDiv.width()-msgDiv.width())
var heightspace =(maskDiv.height()-msgDiv.height());
msgDiv.css({
커서:'wait',
top:(heightspace/2-2),
왼쪽: (widthspace/2-2)
})
}
maskDiv.fadeIn('fast', function(){
// 淡入淡效果
$(this).fadeTo( '느림', op.opacity)
})
return MaskDiv;
},
unmask: function(){
var original=$(document.body)
if(this[0] && this[0]!==window.document){
original=$(this[0])
}
original.find("> div.maskdivgen" ).fadeOut('slow',0,function(){
$(this).remove();
})
}
});



测试

关闭div遮罩 ;a href="#" onclick="$(document).mask('전체屏遮罩').click(function(){$(document).unmask()})">전체부遮罩> ;