<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="clickme">点击</button>
<button id="clickme1">点击1111111</button>
</body>
<script type="text/javascript">
//弹窗样式
var backgroundDivStyle = "position: fixed;top:0;left:0;z-index:9999;width: 100%;height: 100%;background: #000;opacity: 0.7;";
var boxDivStyle = "position: fixed;z-index: 10000;left:50%;top:50%;border:5px solid #ccc;background: #fff;transform: translate(-50%,-50%);padding:20px 30px;line-height: 30px;";
var boxSpanDivStyle = "position: absolute;top:0;right:0;padding:0 5px;cursor:pointer;background:#ccc;color:#fff;font-size: 20px;";
//构造函数
var alerts = {
run:function(word){
this.created(word);
this.bind();
},
remove:function(){
document.body.removeChild(document.getElementById("boxDiv"));
document.body.removeChild(document.getElementById("backgroundDiv"));
},
created:function(word){
addDiv(backgroundDivStyle,"backgroundDiv");
addDiv(boxDivStyle,"boxDiv",word);
document.getElementById("boxDiv").appendChild(addSpan(boxSpanDivStyle,"boxSpan"));
},
bind:function(){
var _this = this;
document.getElementById("boxSpan").addEventListener("click",function(){
_this.remove();
});
document.getElementById("backgroundDiv").addEventListener("click",function(){
_this.remove();
});
}
}
//创建弹窗元素
function addDiv(stl,id,word){
var oDiv = document.createElement('div');
oDiv.style = stl;
oDiv.id = id;
if(word) oDiv.innerHTML = word;
document.body.appendChild(oDiv);
}
function addSpan(stl,id){
var oSpan = document.createElement('span');
oSpan.style = stl;
oSpan.id = id;
oSpan.innerHTML = "×";
return oSpan;
}
//点击触发
document.getElementById("clickme").onclick = function(){
alerts.run("说点什么吧!说点什么吧!说点什么吧!说点什么吧!说点什么吧!说点什么吧!说点什么吧!说点什么吧!说点什么吧!说点什么吧!");
}
document.getElementById("clickme1").onclick = function(){
alerts.run("再说些什么吧!再说些什么吧!再说些什么吧!再说些什么吧!再说些什么吧!再说些什么吧!再说些什么吧!再说些什么吧!再说些什么吧!再说些什么吧!再说些什么吧!再说些什么吧!");
}
</script>
</html>
js 构造函数封装弹出窗插件小例子
最新推荐文章于 2023-08-21 21:59:00 发布