jQuery 페이지 마스크 구현 code_jquery

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). 제거();
});
}
})



사용방법

코드 복사

코드는 다음과 같습니다. $.documentMask(); $.documentMask({

'불투명도': 0.6,

'bgcolor': '#E79673',
'z': 1000000
} );


매개변수 중 z는 z-index를 나타냅니다.

호환성

IE 6.0, FF2, Safari 3.1, Opera 9.0 지원

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.