弹窗的组件开发

<!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>

 

你可能感兴趣的:(开发)