封装弹窗组件

来源：互联网发布：p2p网管软件编辑：程序博客网时间：2024/05/16 18:10
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>封装弹窗组件</title>    <style type="text/css" media="screen">        .login{            border:1px solid #000;            position:absolute;            z-index:2;        }        .title{            height:50px;            background:#ccc;            font-size:24px;            line-height:50px;        }        .title .close{            float:right;        }        #mask{            position: absolute;            background:black;            filter:alpha(opacity=50);            opacity:0.5;            top:0;            left:0;            z-index:1;        }    </style></head><body>    <input type="button" name="" value='1'>    <input type="button" name="" value='2'>    <input type="button" name="" value='3'>    <script type="text/javascript">        window.onload = function() {            var aInput = document.getElementsByTagName('input');            aInput[0].onclick = function() {                var d1 = new Dialog();                d1.init({ //配置参数，有配置走配置，没配置走默认                    iNow:0,                    title:'登录'                });            }            aInput[1].onclick = function() {                var d1 = new Dialog();                d1.init({ //配置参数，有配置走配置，没配置走默认                    iNow:1,                    width:200,                    height:400,                    background:'red',                    dir:'rightBottom',                    title:'公告'                });            }            aInput[2].onclick = function() {                var d1 = new Dialog();                d1.init({ //配置参数，有配置走配置，没配置走默认                    iNow:2,                    mask:true                });            }        }        function Dialog() {            var obj = null;            this.settings = { //默认                width:300,                height:300,                background:'#fff',                dir:'center',                mask:false,                title:''            }        }        Dialog.prototype.json  = {};        Dialog.prototype.init = function(opt) {            extend(this.settings,opt);            if (this.json[opt.iNow] == undefined) {                this.json[opt.iNow] = true;            }            if (this.json[opt.iNow]) {                this.create();                this.close();                if (this.settings.mask) {                    this.createMask();                }                this.json[opt.iNow] = false;            }        }        Dialog.prototype.create = function() {            this.obj = document.createElement('div');            this.obj.className = 'login';            this.obj.innerHTML = `<div class='title'><span>${this.settings.title}</span><span class='close'>关闭</span></div>`;            document.body.appendChild(this.obj);            this.setData();        }        Dialog.prototype.setData = function() {            this.obj.style.width = this.settings.width + 'px';            this.obj.style.height = this.settings.height + 'px';            this.obj.style.background = this.settings.background;            if (this.settings.dir == 'center') {                this.obj.style.left = (viewWidth() - this.obj.offsetWidth)/2 + 'px';                this.obj.style.top = (viewHeight() - this.obj.offsetHeight)/2 + 'px';            } else if (this.settings.dir == 'rightBottom') {                this.obj.style.left = (viewWidth() - this.obj.offsetWidth) + 'px';                this.obj.style.top = (viewHeight() - this.obj.offsetHeight) + 'px';            }        }        Dialog.prototype.close = function() {            var oClose = this.obj.getElementsByTagName('span')[1];            var _this = this;            oClose.onclick = function() {                if (_this.settings.mask) {                    document.body.removeChild(_this.oMask);                }                document.body.removeChild(_this.obj);                _this.json[_this.settings.iNow] = true;            }        }        Dialog.prototype.createMask = function() {            var oMask = document.createElement('div');            oMask.id = 'mask';            this.oMask = oMask;            oMask.style.width = viewWidth() + 'px';            oMask.style.height = viewHeight() + 'px';            document.body.appendChild(oMask)        }        function extend(obj1,obj2) {            for (var attr in obj2) {                if (obj2.hasOwnProperty(attr)) {                    obj1[attr] = obj2[attr];                }            }        }        function viewWidth() {            return document.documentElement.clientWidth;        }        function viewHeight() {            return document.documentElement.clientHeight;        }    </script></body></html>
0 0