javascript 마스크 층 작성
4156 단어 JavaScript
(function(a) {
a.fn.mask = function(c, b) {
a(this).each(function() {
if (b !== undefined && b > 0) {
var d = a(this);
d.data("_mask_timeout", setTimeout(function() {
a.maskElement(d, c)
}, b))
} else {
a.maskElement(a(this), c)
}
})
};
a.fn.unmask = function() {
a(this).each(function() {
a.unmaskElement(a(this))
})
};
a.fn.isMasked = function() {
return this.hasClass("masked")
};
a.maskElement = function(d, c) {
if (d.data("_mask_timeout") !== undefined) {
clearTimeout(d.data("_mask_timeout"));
d.removeData("_mask_timeout")
}
if (d.isMasked()) {
a.unmaskElement(d)
}
if (d.css("position") == "static") {
d.addClass("masked-relative")
}
d.addClass("masked");
var e = a('<div class="loadmask"></div>');
if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
e.height(d.height() + parseInt(d.css("padding-top"))
+ parseInt(d.css("padding-bottom")));
e.width(d.width() + parseInt(d.css("padding-left"))
+ parseInt(d.css("padding-right")))
}
if (navigator.userAgent.toLowerCase().indexOf("msie 6") > -1) {
d.find("select").addClass("masked-hidden")
}
d.append(e);
if (c !== undefined) {
var b = a('<div class="loadmask-msg" style="display:none;"></div>');
b.append("<div>" + c + "</div>");
d.append(b);
b.css("top", Math.round(d.height()
/ 2
- (b.height() - parseInt(b.css("padding-top")) - parseInt(b
.css("padding-bottom"))) / 2)
+ "px");
b.css("left", Math.round(d.width()
/ 2
- (b.width() - parseInt(b.css("padding-left")) - parseInt(b
.css("padding-right"))) / 2)
+ "px");
b.show()
}
};
a.unmaskElement = function(b) {
if (b.data("_mask_timeout") !== undefined) {
clearTimeout(b.data("_mask_timeout"));
b.removeData("_mask_timeout")
}
b.find(".loadmask-msg,.loadmask").remove();
b.removeClass("masked");
b.removeClass("masked-relative");
b.find("select").removeClass("masked-hidden")
}
})(jQuery);
커버 층 CSS
.loadmask {
z-index: 100;
position: absolute;
top:0;
left:0;
-moz-opacity: 0.5;
opacity: .50;
filter: alpha(opacity=50);
background-color: #CCC;
width: 100%;
height: 100%;
zoom: 1;
}
.loadmask-msg {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #80AAE0;
border-radius: 4px 4px 4px 4px;
display: none;
height: 32px;
left: 50%;
margin-left: -54px;
margin-top: -19px;
overflow: hidden;
padding: 2px;
position: absolute;
top: 50%;
width: 112px;
z-index: 101;
}
.loadmask-msg div {
background: #fbfbfb url('images/loading.gif') no-repeat 5px 9px;
color: #444444;
display: block;
font-size: 12px;
height: 30px;
line-height: 30px;
padding-left: 32px;
}
.masked {
overflow: hidden !important;
}
.masked-relative {
position: relative !important;
}
.masked-hidden {
visibility: hidden !important;
}
이 두 파일 을 페이지 로 가 져 온 다음 $("body"). mask ("불 러 오 는 중...") 를 호출 합 니 다.body 에 마스크 를 탑재 하 는 것 을 나타 낸다
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.