js面向对象组件开发---弹窗


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            body{
                margin: 100px;
            }
            .box{
                width: 300px;
                height: 300px;
                border: 1px solid #DD8D7C;
                position: absolute;
                left: 50px;
                top: 50px;
                z-index: 2;
            }

            .box .title{
                height: 40px;
                line-height: 40px;
                background: #d8d8d8;
            }

            .box .title .close{
                position: absolute;
                top: 0;
                right: 10px;
                cursor: pointer;
            }
            .mark{
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
                background: rgba(0,0,0,0.5);
            }
        style>
    head>
    <body>
        <input type="button" name="" id="" value="弹窗1" />
        <input type="button" name="" id="" value="弹窗2" />
        <input type="button" name="" id="" value="弹窗3" />
        
        
    body>
    <script type="text/javascript">
        window.onload = function(){
            var aBtns = document.getElementsByTagName('input');
            aBtns[0].onclick = function(){
                var d1 = new Dialog();
                d1.init({
                    w:200,
                    h:200,
                    title:'最新消息',
                    con:'今天周五',

                })
            };


            aBtns[1].onclick = function(){
                var d2 = new Dialog();
                d2.init({
                    w:300,
                    h:300,
                    title:'qq',
                    con:'hi',
                    dir:'right',
                })
            }


            aBtns[2].onclick = function(){
                var d3 = new Dialog();
                d3.init({
                    w:400,
                    h:400,
                    title:'微信',
                    con:'hello',
                    mark:true
                })
            }

        }

        function Dialog(){
            this.oBox = null;
            this.oMark = null;
            this.setting = { //配置参数
                w:300,
                h:300,
                dir:'center',
                title:'',
                mark:false
            }
        }

        Dialog.prototype.init = function(opt){
            extend(this.setting,opt);

                this.creat();
                this.dir();
                this.close();
                if(this.setting.mark){
                    this.mark();
                }

        }
        //动态创建窗口
        Dialog.prototype.creat = function(){
            this.oBox = document.createElement('div');
            this.oBox.className = "box";
            this.oBox.innerHTML = '
'+this.setting.title+'X
'+this.setting.con+'
'
document.body.appendChild(this.oBox); } //加一层纱 Dialog.prototype.mark = function(){ this.oMark = document.createElement('div'); this.oMark.className = "mark"; document.body.appendChild(this.oMark); } //窗口大小和位置 Dialog.prototype.dir = function(){ this.oBox.style.width = this.setting.w + 'px'; this.oBox.style.height = this.setting.h +'px'; if(this.setting.dir == 'center'){ this.oBox.style.left = (vieww() - this.oBox.offsetWidth)/2 + "px"; this.oBox.style.top = (viewh() - this.oBox.offsetHeight)/2 + "px"; } if(this.setting.dir == 'right'){ this.oBox.style.left = vieww() - this.oBox.offsetWidth + "px"; this.oBox.style.top = viewh() - this.oBox.offsetHeight + "px"; } } //关闭窗口 Dialog.prototype.close = function(){ var oClose = this.oBox.getElementsByClassName('close')[0]; var _this = this; oClose.onclick = function(){ document.body.removeChild( _this.oBox); if(_this.setting.mark){ document.body.removeChild( _this.oMark); } } } function vieww(){ return document.documentElement.clientWidth; } function viewh(){ return document.documentElement.clientHeight; } // 拷贝 function extend(obj1,obj2){ for(var i in obj2){ obj1[i] = obj2[i]; } }
script> html>

你可能感兴趣的:(面向对象)