插件———彈框
阿新 • • 發佈：2017-09-22
div utf-8 splay classname state close text ted play
場景：彈出提示信息；可添加提示信息
pop-layer.js
/**
* Created by AAA on 2017/9/21.
*/
var popLayer = {
init (option) {
this.initOptions(option);
this.initElement(option);
document.getElementsByClassName("close-btn")[0].onclick = () => {
this.closeLayer()
};
this.ensuerFunc();
this.cancelFunc();
},
option: {
title: "提示", //彈窗標題
state: "success", //狀態
text: "", //文本
showCancel: false, // 顯示取消按鈕
ensuerFunc: "", //確定按鈕 回調
cancelFunc: "", //取消按鈕 回調
ensuerText: "確定", //確定按鈕文本
cancelText: "取消", //取消按鈕文本
},
initOptions(option){
option = Object.assign(this.option, option);
},
closeLayer(){
document.getElementsByClassName("ldj-hint-ball-windows")[0].parentNode.removeChild(document.getElementsByClassName("ldj-hint-ball-windows")[0]);
},
ensuerFunc(){
document.getElementsByClassName("ensuer")[0].onclick = () => {
return this.option.ensuerFunc();
};
},
cancelFunc(){
document.getElementsByClassName("cancel")[0].onclick = () => {
return this.option.cancelFunc();
};
},
initElement(option){
var ele = `
<div class="ldj-win-cont">
<div class="ldj-cont-title">
<span class="ldj-title-text">${this.option.title}</span>
</div>
<div class="close-btn">
×
</div>
<div class="ldj-ball-detail">
<div class="hint-icon-box">
${this.option.state}
</div>
<div class="hint-text">
<span class="text">${this.option.text}</span>
</div>
</div>
<div class="ldj-ball-btn">
<span class="hand cancel behavior" style="display: ${this.option.showCancel === false ? "none" : ""}">
${this.option.cancelText}
</span>
<span class="hand ensuer behavior">${this.option.ensuerText}</span>
</div>
</div>
`;
var createElement = document.createElement("div");
createElement.className = "ldj-hint-ball-windows";
createElement.innerHTML = ele;
document.body.appendChild(createElement);
},
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彈框</title>
<link rel="stylesheet" href="pop-layer.css">
</head>
<body>
<button>彈框</button>
<script src="polyfill-objectAssign.js"></script>
<script src="pop-layer.js"></script>
<script>
document.getElementsByTagName("button")[0].onclick = function () {
var layerOptions = {
title: "提示", //彈窗標題
state: "error", //狀態
text: "測試文字", //文本
showCancel: true, // 顯示取消按鈕
ensuerFunc: ensuerFunc, //確定按鈕 回調
cancelFunc: cancelFunc, //取消按鈕 回調
ensuerText: "確定", //確定按鈕文本
cancelText: "取消", //取消按鈕文本
};
popLayer.init(layerOptions);
};
var ensuerFunc = () => {
popLayer.closeLayer();
console.log("ensuerFunc");
};
var cancelFunc = () => {
popLayer.closeLayer();
console.log("cancelFunc");
}
</script>
</body>
</html>
工作中使用的版本要考慮兼容ie8，有需要自己改。樣式自己決定吧
插件———彈框