前端开发者| 前端与游戏开发哪个好 |
| 游戏客户端开发前端 |
| 游戏开发的前端 |
一、无遮罩。代码说明：（1）A处代码，为弹窗准备存储空间；（2）B处代码，如果弹窗存在，就不再产生弹窗；（3）C处代码，存储弹窗；（4）D处代码，销毁已经存储的弹窗，为弹窗再建做准备。另，这是无遮罩弹窗，往下拉，还有有遮罩弹窗。
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>弹窗</title>
<style>
.dialog {
background: grey;
width: 150px;
height: 30px;
font-size: 25px;
font-family: ‘楷体’;
border-radius: 5px;
user-select: none;
}
</style>
</head>
<body>
<div class=”dialog” onclick=”new Dialog({width:800,height:300})”>
点击出现弹窗
</div>
<script>
var Dialog = (function() {
var instant = null //A处代码
function DialogInner(options) {
if (instant) return instant //B处代码
this.options = {
width: 200,
height: 100,
}
this.init(options)
instant = this //C处代码
}
DialogInner.prototype.extend = function(son, parent) {
for (var attr in parent) {
son[attr] = parent[attr]
}
}
DialogInner.prototype.init = function(options) {
this.extend(this.options, options)
this.makeMark = document.createElement(‘div’)
this.makeMark.style.background = ‘rgba(0,0,0,.1)’
this.makeMark.style.zIndex = 1000
this.makeMark.style.width = this.options.width + ‘px’
this.makeMark.style.height = this.options.height + ‘px’
this.makeMark.style.position = ‘absolute’
this.makeMark.style.top = 0
this.makeMark.style.right = 0
this.makeMark.style.bottom = 0
this.makeMark.style.left = 0
this.makeMark.style.margin = ‘auto’
document.body.appendChild(this.makeMark)
this.closeMark = document.createElement(‘div’)
this.closeMark.innerHTML =
‘<div style=”position: absolute;right:20px;bottom:20px”><button id=”closeButton”>关闭弹窗</button></div>’
this.makeMark.appendChild(this.closeMark)
this.killMark()
}
DialogInner.prototype.killMark = function() {
var that = this
closeButton.onclick = function() {
document.body.removeChild(that.makeMark)
instant = null //D处代码
}
}
return DialogInner
})()
</script>
</body>
</html>
二、有遮罩。代码说明：上面是无遮罩弹窗，下面这个是有遮罩弹窗。由于遮罩把“点击出现弹窗”按钮给盖住了，所以不存在弹窗重复生成的问题。
html 代码
| 游戏开发 前端和后端 |
| web前端开发小游戏 |
| 前端开发能做游戏吗 |
» 本文来自：前端开发者 » 《前端开发JS插件_原生版弹窗》
» 本文链接地址：https://www.rokub.com/8081.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册