弹窗的组件开发

最新推荐文章于 2024-04-15 14:38:30 发布

chengweng2602

最新推荐文章于 2024-04-15 14:38:30 发布

阅读量129

点赞数

文章标签： json

原文链接：https://my.oschina.net/u/3147332/blog/807038

版权

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
.login{ background:white; border:1px #000 solid; position:absolute; left:0; top:0;  z-index:2;}
.title{ height:30px; background:gray; color:white;}
.title .close{ float:right;}
#mark{ background:black; fitler:alpha(opacity=50); opacity:0.5; position:absolute; left:0; top:0; z-index:1;}
</style>
<script>

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,
            w : 100,
            h : 400,
            dir : 'right',
            title : '公告'
        });
        
    };
    
    aInput[2].onclick = function(){
        
        var d1 = new Dialog();
        d1.init({   //配置参数
            iNow : 2,
            mark : true
        });
        
    };
    
    
};

function Dialog(){
    
    this.oLogin = null;
    
    this.settings = {   //默认参数
        w : 300,
        h : 300,
        dir : 'center',
        title : '',
        mark : false
    };
    
}

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.fnClose();
        
        if(this.settings.mark){
            this.createMark();
        }
        
        this.json[opt.iNow] = false;
        
    }
    
};

Dialog.prototype.create = function(){
    
    this.oLogin = document.createElement('div');
    this.oLogin.className = 'login';
    this.oLogin.innerHTML = '<div class="title"><span>'+ this.settings.title +'</span><span class="close">X</span></div><div class="content"></div>';
    
    document.body.appendChild( this.oLogin );
    
    this.setData();
};

Dialog.prototype.setData = function(){
    
    this.oLogin.style.width = this.settings.w + 'px';
    this.oLogin.style.height = this.settings.h + 'px';
    
    if( this.settings.dir == 'center' ){
        this.oLogin.style.left =  (viewWidth() - this.oLogin.offsetWidth)/2 + 'px';
        this.oLogin.style.top =  (viewHeight() - this.oLogin.offsetHeight)/2 + 'px';
    }
    else if( this.settings.dir == 'right' ){
        this.oLogin.style.left =  (viewWidth() - this.oLogin.offsetWidth) + 'px';
        this.oLogin.style.top =  (viewHeight() - this.oLogin.offsetHeight) + 'px';
    }
    
};

Dialog.prototype.fnClose = function(){
    
    var oClose = this.oLogin.getElementsByTagName('span')[1];
    var This = this;
    
    oClose.onclick = function(){
        
        document.body.removeChild( This.oLogin );
        
        if(This.settings.mark){
            document.body.removeChild( This.oMark );
        }
        
        This.json[This.settings.iNow] = true;
        
    };
    
};

Dialog.prototype.createMark = function(){
    
    var oMark = document.createElement('div');
    oMark.id = 'mark';
    
    document.body.appendChild( oMark );
    
    this.oMark = oMark;
    
    oMark.style.width = viewWidth() + 'px';
    oMark.style.height = viewHeight() + 'px';
    
};

function extend(obj1,obj2){
    for(var attr in obj2){
        obj1[attr] = obj2[attr];
    }
}

function viewWidth(){
    return document.documentElement.clientWidth;
}
function viewHeight(){
    return document.documentElement.clientHeight;
}


</script>
</head>

<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">

<!--<div class="login">
    <div class="title">
        <span>标题</span><span class="close">X</span>
    </div>
    <div class="content"></div>
</div>-->
<!--<div id="mark"></div>-->
</body>
</html>