js自定义弹窗

深藏阁楼爱情的钟 2023-02-16 06:48 9阅读 0赞

<div id="app_pop_up">
        
    	<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,
    	}
    
    }()