js 사용자 정의 창
6450 단어 JavaScript도구 클래스
//
popUp.initPop({
name: 'app_pop_up'
},
function() {
mui.toast('message')
});
//
popUp.showPop('app_pop_up');
//
popUp.hidePop('app_pop_up')pop_up.js
/**
*
*
* id . app_pop_up_content class ,
*
*
*
*/
var popUp = function() {
/**
*
*
* @param {Object} obj
* obj.name : id
* obj.position : , default-absolute, relative
* obj.zIndex : , default-11
* obj.opacity : , default-0.5
* obj.width : default-80%
* obj.height : default-80%
* obj.background : , default-#FFF
* obj.borderRadius : , default-8px
* obj.hideF :
* @param {Object} fun
*
*/
function init(obj, fun) {
if (obj.name == undefined) {
console.error("error: id cannot be empty");
return;
}
var pop_up_style = document.getElementById('pop_up_style')
if (pop_up_style == null || pop_up_style == undefined) {
// css default-popIn_suyar , , fadeleftIn_suyar- ,fadelogIn_suyar- ,.fadeInDown_suyar-
var css =
'.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}';
css +=
".popIn_suyar{-webkit-animation:fadeleftIn_suyar .4s;animation:fadeleftIn_suyar .4s;-webkit-animation-name:popIn_suyar;animation-name:popIn_suyar;}@-webkit-keyframes popIn_suyar{0%{opacity:0;-webkit-transform:scale3d(0,0,0);transform:scale3d(.5,.5,.5);}50%{-webkit-animation-timing-function:cubic-bezier(.47,0,.745,.715);animation-timing-function:cubic-bezier(.47,0,.745,.715);}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);-webkit-animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-timing-function:cubic-bezier(.25,.46,.45,.94);}}@keyframes popIn_suyar{0%{opacity:0;-webkit-transform:scale3d(0,0,0);transform:scale3d(.5,.5,.5);}50%{-webkit-animation-timing-function:cubic-bezier(.47,0,.745,.715);animation-timing-function:cubic-bezier(.47,0,.745,.715);}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);-webkit-animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-timing-function:cubic-bezier(.25,.46,.45,.94);}}";
css +=
'.fadeleftIn_suyar{-webkit-animation:fadeleftIn_suyar .4s;animation:fadeleftIn_suyar .4s}@keyframes fadeleftIn_suyar{0%{-webkit-transform:translate3d(100%,0,0);-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{-webkit-transform:none;transform:none}}@-webkit-keyframes fadeleftIn_suyar{0%{-webkit-transform:translate3d(100%,0,0)}100%{-webkit-transform:none}}';
css +=
'.fadelogIn_suyar{-webkit-animation:fadelogIn_suyar .4s;animation:fadelogIn_suyar .4s}@keyframes fadelogIn_suyar{0%{-webkit-transform:translate3d(0,100%,0);-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{-webkit-transform:none;transform:none}}@-webkit-keyframes fadelogIn_suyar{0%{-webkit-transform:translate3d(0,100%,0)}100%{-webkit-transform:none}}';
css +=
'.fadeInDown_suyar{-webkit-animation:fadeInDown_suyar .3s;animation:fadeInDown_suyar .3s}@keyframes fadeInDown_suyar{0%{-webkit-transform:translate3d(0,-20%,0);-webkit-transform:translate3d(0,-20%,0);transform:translate3d(0,-20%,0);transform:translate3d(0,-20%,0);opacity:0}100%{-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes fadeInDown_suyar{0%{-webkit-transform:translate3d(0,-20%,0);opacity:0}100%{-webkit-transform:none;opacity:1}}';
var style = document.createElement('style')
style.append(css)
style.id = "pop_up_style"
document.head.appendChild(style)
}
//
if (obj.position == undefined) obj.position = 'absolute';
if (obj.width == undefined) obj.width = '80%'
if (obj.height == undefined) obj.height = '80%'
if (obj.backgroundColor == undefined) obj.backgroundColor = "#FFF"
if (obj.borderRadius == undefined) obj.borderRadius = '8px'
if (obj.zIndex == undefined) obj.zIndex = '11'
if (obj.opacity == undefined) obj.opacity = 0.5
if (obj.hideF == undefined || typeof(obj.hideF) != 'boolean') obj.hideF = true;
//
var box = document.getElementById(obj.name)
//
if (box == null || box == undefined) {
console.error("error: error document!");
return;
}
box.style.position = 'absolute'
box.style.display = 'none'
box.style.alignItems = "center"
box.style.justifyContent = "center"
box.style.width = "100%";
box.style.height = "100%";
box.style.top = "0"
box.style.zIndex = obj.zIndex
box.classList.add('animated'); //
//
var div = document.createElement("div")
div.style.width = "100%";
div.style.height = "100%";
div.style.backgroundColor = "rgba(0,0,0," + obj.opacity + ")";
if (obj.hideF)
div.setAttribute("onClick", "popUp.hidePop(\"" + obj.name + "\"," + fun + ")")
box.appendChild(div)
// ,
var up = box.children;
up[0].style.width = obj.width;
up[0].style.height = obj.height;
up[0].style.position = obj.position;
up[0].style.backgroundColor = obj.backgroundColor;
up[0].style.borderRadius = obj.borderRadius
}
/**
*
* @param {Object} name
* id
*/
function show(name) {
var box = document.getElementById(name)
box.style.display = 'flex'
box.classList.add('popIn_suyar')
}
/**
*
* @param {Object} name
* id
* @param {Object} fun
*
*/
function hide(name, fun) {
var box = document.getElementById(name)
if (typeof(fun) != 'function') {
box.lastElementChild.click()
return;
}
box.style.display = 'none'
box.classList.remove("popIn_suyar")
if (typeof(fun) == 'function') {
fun()
}
}
return {
initPop: init,
showPop: show,
hidePop: hide,
}
}()
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
