js自定義彈窗

<!-- id可自定義 -->
<div id="app_pop_up">
    <!-- app_pop_up_content 是固定的 -->
	<div class="app_pop_up_content"></div>
</div>

 

// 初始化
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 , 用來顯示 主體內容
 *	<div id="app_pop_up">
 *		<div class="app_pop_up_content"></div>
 *	</div>
 */
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,
	}

}()