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

最新推荐文章于 2022-05-30 18:09:58 发布

sweetllh

最新推荐文章于 2022-05-30 18:09:58 发布

阅读量1k

点赞数

分类专栏：面向对象文章标签：面向对象

本文链接：https://blog.csdn.net/sweetllh/article/details/74012022

版权

面向对象专栏收录该内容

28 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<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" />
        <!--<div class="box">
            <div class="title">
                <span>弹窗</span>
                <span class="close">X</span>
                <div class="con">XXX</div>
            </div>
        </div>-->
        <!--<div class="mark"></div>-->
    </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 = '<div class="title"><span>'+this.setting.title+'</span><span class="close">X</span><div class="con">'+this.setting.con+'</div></div>'
            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>

sweetllh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js面向对象组件开发---弹窗

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0;
复制链接

扫一扫