前端开发JS插件_原生版弹窗

前端与游戏开发哪个好
游戏客户端开发前端
游戏开发的前端

一、无遮罩。代码说明:(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
赞(0)
64K

评论 抢沙发

评论前必须登录!