jQuery 페이지 마스크 구현 code_jquery-JS 튜토리얼-php.cn

jQuery 페이지 마스크 구현 code_jquery

WBOY

풀어 주다： 2016-05-16 18:36:51

원래의

1411명이 탐색했습니다.

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 지원

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

jQuery 페이지 마스크 구현 code_jquery