封装弹窗并模拟confirm方法
程序员文章站
2022-05-31 18:05:35
...
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.cancel,
.confirm {
cursor: pointer;
width: 40%;
outline: none;
border: 0px;
text-align: center;
background: white;
color: blue;
border: 1px solid lightseagreen;
}
.cancel {
margin-right: 10%;
}
.confirm {
margin-left: 10%;
}
</style>
</head>
<body>
<button>弹出中间弹框</button>
</body>
<script>
var oButton = document.getElementsByTagName("button")[0];
oButton.onclick = function () {
new layer(
{ layerCertain: true, position: 'left', top: '200px', left: '350px' }, function () {
alert('点击了确认')
}, function () {
alert('点击了取消')
});
}
function layer(styleChange, funOne, funTwo) {
this.funOne = funOne||null;
this.funTwo = funTwo||null;
this.style = {
title: '系统提示',
content: '这是默认的提示',
position: 'center',
layerCertain: false,
}
if (styleChange != 'undefined') {
this.forChangeStyle(styleChange);
}
this.init();
}
layer.prototype = {
init() {
this.createDiv();
if (this.style.layerCertain) {
this.layerCertain();
}
this.closeLayer();
this.layerConfirm(this.funOne);
this.layerCancel(this.funTwo);
},
createDiv() {
var iframe = document.createElement('div');
var style = document.createElement("style");
var classStyle = '';
if (this.style.position == 'center') {
classStyle = '.layerPosition{position:fixed;z-index:11;background:lightpink;display:inline-block;height:105px;width:200px;top:0;left:0;bottom:0;right:0;margin:auto';
}
else if (this.style.position == 'left') {
classStyle = '.layerPosition{position:fixed;z-index:11;background:lightpink;display:inline-block;height:105px;width:200px;top:' + this.style.top + ';left:' + this.style.left + '';
}
iframe.className = 'layerPosition';
style.appendChild(document.createTextNode(classStyle));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
iframe.innerHTML = '<h3>' + this.style.title + '<p style="color:red;cursor:pointer;margin:0;float:right"id="closeLayer">XXX</p></h3><div>' + this.style.content + '</div><div><button class="cancel">取消</button><button class="confirm">确定</button>';
document.body.appendChild(iframe);
},
layerCertain() {
var oCertain = document.createElement('div');
var style = document.createElement("style");
var classStyle = '';
classStyle = '.layerCertain{position:fixed;z-index:1;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.4)}';
style.appendChild(document.createTextNode(classStyle));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
oCertain.className = 'layerCertain';
document.body.appendChild(oCertain);
},
closeLayer() {
this.addHandler(document.getElementById('closeLayer'), 'click', function () {
var certain = document.getElementsByClassName('layerCertain')[0] || null,
layerPanel = document.getElementsByClassName('layerPosition')[0];
if (certain) {
certain.parentElement.removeChild(certain);
}
layerPanel.parentElement.removeChild(layerPanel);
});
},
//这个是回调的重点
layerConfirm(funOne) {
var _this = this;
this.addHandler(document.getElementsByClassName('confirm')[0], 'click', function () {
if (funOne && typeof funOne == 'function') {
funOne();
}
var certain = document.getElementsByClassName('layerCertain')[0] || null,
layerPanel = document.getElementsByClassName('layerPosition')[0];
if (certain) {
certain.parentElement.removeChild(certain);
}
layerPanel.parentElement.removeChild(layerPanel);
})
},
//这个是回调的重点
layerCancel(funTwo){
var _this = this;
this.addHandler(document.getElementsByClassName('cancel')[0],'click',function(){
if(funTwo&&typeof funTwo == 'function'){
funTwo();
}
var certain = document.getElementsByClassName('layerCertain')[0] || null,
layerPanel = document.getElementsByClassName('layerPosition')[0];
if (certain) {
certain.parentElement.removeChild(certain);
}
layerPanel.parentElement.removeChild(layerPanel);
})
},
addHandler(obj, type, fun) {
obj.addEventListener ? obj.addEventListener(type, fun) : obj['on' + type] = fun;
},
forChangeStyle(styleChange) {
for (var key in styleChange) {
this.style[key] = styleChange[key];
}
}
}
</script>
</html>效果图如下
如有更好的解决方法，欢迎提出~~