面向对象开发弹窗组件 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{ margin:0; padding:0;}
        .login{ background:white; border:1px #000 solid; position:absolute; left:0; top:0;}
        .title{ height:30px; background:gray; color:white;}
        .title .close{ float:right;}
    </style>
    <script type="text/javascript" src="res/js/jquery.min.js"></script>
    <script type="text/javascript" src="res/js/dialog.js"></script>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<script>
    window.onload = function(){
        var aInput = document.getElementsByTagName('input');

        aInput[0].onclick = function(){

            drag({   //配置参数
                iNow : 0,
                title : '登录'
            });

        };

        aInput[1].onclick = function(){

            drag({   //配置参数
                iNow : 1,
                w : 100,
                h : 400,
                dir : 'right',
                title : '公告'
            });

        };


    };
</script>
</body>
</html>
;(function($, window, document,undefined) {
    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;
    }

    window.drag=function(opt){
    var litdialog= new Dialog();
    litdialog.init(opt);

}
})(jQuery, window, document);

 

posted @ 2016-04-21 14:51  XINYUHAI77  阅读(184)  评论(0)    收藏  举报