由于项目想精简不想用其他第三方的ui插件，又很需要像confirm等小效果来完善交互，且使用的频率也是相当的高，于是自己造了一个，省时也省力
代码已经粘贴出来，直接复制即可看到效果，高手勿喷，可以相互交流下（⊙⊙）
（hmtl js css已经集成到一起无需其他文件，不依赖jquery zepto等库）
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
#button, #button2 {
background: #aaa;
height: 35px;
min-width: 100px;
text-align: center;
line-height: 35px;margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="button">一个确定按钮</div>
<div id="button2">一个确定一个取消按钮</div>
<script>
var obj = {
plugin: (function () {
function ZjsjConfirm() {
this.opt = {
confirm: new Function(),
concel: new Function(),
text: ''
}
this.prevent = function (e) {
e.preventDefault()
}
this.init()
}
ZjsjConfirm.prototype = {
init: function () {
var ndDom = document.getElementById('zjsjPopConfirmWrapper')
if (ndDom !== null) ndDom.parentNode.removeChild(ndDom);
this.dom_div = document.createElement("div")
this.dom_div.id = "zjsjPopConfirmWrapper";
var style = document.createElement("style");
style.innerHTML = '*{outline:none;}#zjsjPopConfirmShade{position:fixed;top:0;left:0;z-index:999999;width:100%;bottom:0;z-index:999999998;background:rgba(0,0,0,.3);display:none;}#zjsjPopConfirm{width:13em;height:auto;overflow:hidden;background:#fff;display:none;border-radius:.4em;-webkit-border-radius:.4em;position:fixed;z-index:999999999;left:50%;top:50%;transform:translate(-50%,-50%);webkit-transform:translate(-50%,-50%);}.zjsjPopText{font-size:.95em;line-height:1.5em;text-align:center;width:100%;padding:.7em .625em .5em .625em;box-sizing:border-box;-webkit-box-sizing:border-box;color:#555;}.zjsjPopButton{width:100%;border-top:1px solid #e1e1e1;color:#5998ff;font-size:.95em;}.zjsjPopYes,.zjsjPopNo{line-height:1em;text-align:center;float:left;width:50%;box-sizing:border-box;-webkit-box-sizing:border-box;padding:.7em 0;position:relative;}.zjsjPopNo:after{content:"";position:absolute;left:0;top:50%;width:1px;background:#e1e1e1;height:100%;transform:translate(-50%,-50%);webkit-transform:translate(-50%,-50%);}';
this.dom_div.innerHTML = '<div id="zjsjPopConfirm"><div class="zjsjPopText"id="zjsjPopConfirmText">这是一个悲剧的故事！！！</div><div class="zjsjPopButton"><div class="zjsjPopYes"id="zjsjPopConfirmYes">确定</div><div class="zjsjPopNo"id="zjsjPopConfirmNo">取消</div></div></div><div id="zjsjPopConfirmShade"></div>';
document.head.appendChild(style);
document.body.appendChild(this.dom_div);
this.bottonYes = document.querySelector('#zjsjPopConfirmYes');
this.bottonNo = document.querySelector('#zjsjPopConfirmNo');
this.ngtext = document.querySelector('#zjsjPopConfirmText');
this.shade = document.querySelector('#zjsjPopConfirmShade');
this.wrap = document.querySelector('#zjsjPopConfirm');
},
onButton: function () {
var that = this
that.ngtext.innerText = this.opt.text
that.shade.style.display = "block"
that.wrap.style.display = "block"
return function () {
var isFun = typeof that.opt.confirm
var ngDom = this.id
if (isFun === 'function' && ngDom === 'zjsjPopConfirmYes') {
that.opt.confirm()
that.shade.style.display = "none"
that.wrap.style.display = "none"
} else {
if (ngDom === 'zjsjPopConfirmNo' && isFun === 'function') {
that.opt.concel()
}
that.shade.style.display = "none"
that.wrap.style.display = "none"
}
that.dom_div.removeEventListener('touchmove', that.prevent, false);
that.bottonYes.removeEventListener('click', that.back, false);
that.bottonNo.removeEventListener('click', that.back, false);
}
},
setInfo: function (opt) {
var that = this
// var el = document.querySelector(opt.el);
var _n = document.querySelector('#zjsjPopConfirmNo');
var _y = document.querySelector('#zjsjPopConfirmYes');
var type = opt.type ? opt.type : 0
switch (type) {
case 1:
_n.style.display = 'none'
_y.style.width = '100%'
break;
default:
_n.style.display = 'block'
_y.style.width = '50%'
break;
}
// el.addEventListener("click", function () {
that.opt.text = opt.text
that.opt.confirm = opt.confirm
that.opt.concel = opt.concel
that.back = that.onButton()
that.bottonYes.addEventListener("click", that.back, false);
that.bottonNo.addEventListener("click", that.back, false);
that.dom_div.addEventListener('touchmove', that.prevent, false);
// }, false);
}
}
return function () {
return new ZjsjConfirm();
}
})()
}
//使用1 单个确认弹出窗
button.addEventListener("click", function () {
obj.plugin().setInfo({
text: 'yooooo',
confirm: function () {
console.log('你点了确定')
},
type: 1
})
})
//使用2 有确认和取消两个按钮
button2.addEventListener("click", function () {
obj.plugin().setInfo({
text: 'sfsdfsdfsdfsd',
confirm: function () {
console.log('你点了确定')
},
concel: function () {
console.log('你点了取消')
}
})
})
</script>
</body>
</html>
觉得有帮助的同学，可以支持作者，谢谢！！
支付宝： 微信：