Ajax 애플리케이션에서는 대화 상자(Div 모드에서 표시됨)를 표시하기 전에 마스크가 먼저 생성됩니다. 자주 사용하기 때문에 직접 사용하기 쉽도록 jQuery 플러그인으로 작성했습니다.
(함수($){
$.extend ({
documentMask: function(options){
// 확장 매개변수
var op = $.extend({
불투명도: 0.8,
z: 10000,
bgcolor: ' #000'
}, options)
// 마스크 레이어를 생성하고 document.body에 추가합니다
$('
< ;/div> ').appendTo(document.body).css({
위치: '절대',
상단: '0px',
왼쪽: '0px',
'z- index': op .z,
너비: $(document).width(),
높이: $(document).height(),
'Background-color': op.bgcolor,
opacity: 0
}).fadeIn('slow', function(){
// 페이드 인 및 페이드 아웃 효과
$(this).fadeTo('slow', op.opacity);
}).click (function(){
// 클릭 이벤트, 마스크가 파괴됩니다
$(this).fadeTo('slow', 0, function(){
$(this). 제거();
});
}
})
사용방법
코드 복사
'불투명도': 0.6,
'bgcolor': '#E79673',
'z': 1000000
} );
매개변수 중 z는 z-index를 나타냅니다.
호환성
IE 6.0, FF2, Safari 3.1, Opera 9.0 지원
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
