封装弹窗组件

最新推荐文章于 2025-06-03 12:11:39 发布

song_zhiyin

最新推荐文章于 2025-06-03 12:11:39 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签：组件弹窗组件面向对象

本文链接：https://blog.csdn.net/cdegjj/article/details/60467114

javaScript 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个自定义的弹窗组件实现方法，通过JavaScript创建不同样式和位置的弹窗，并支持遮罩层显示与隐藏。该组件可以根据配置参数调整弹窗的宽度、高度、背景颜色及显示位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>封装弹窗组件</title>
    <style type="text/css" media="screen">
        .login{

            border:1px solid #000;
            position:absolute;
            z-index:2;
        }
        .title{
            height:50px;
            background:#ccc;
            font-size:24px;
            line-height:50px;
        }
        .title .close{
            float:right;
        }
        #mask{
            position: absolute;
            background:black;
            filter:alpha(opacity=50);
            opacity:0.5;
            top:0;
            left:0;
            z-index:1;
        }
    </style>
</head>
<body>
    <input type="button" name="" value='1'>
    <input type="button" name="" value='2'>
    <input type="button" name="" value='3'>

    <script type="text/javascript">
        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,
                    width:200,
                    height:400,
                    background:'red',
                    dir:'rightBottom',
                    title:'公告'

                });
            }
            aInput[2].onclick = function() {
                var d1 = new Dialog();
                d1.init({ //配置参数，有配置走配置，没配置走默认
                    iNow:2,
                    mask:true
                });
            }
        }
        function Dialog() {
            var obj = null;
            this.settings = { //默认
                width:300,
                height:300,
                background:'#fff',
                dir:'center',
                mask:false,
                title:''
            }
        }
        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.close();
                if (this.settings.mask) {
                    this.createMask();
                }
                this.json[opt.iNow] = false;
            }

        }
        Dialog.prototype.create = function() {
            this.obj = document.createElement('div');
            this.obj.className = 'login';
            this.obj.innerHTML = `<div class='title'><span>${this.settings.title}</span><span class='close'>关闭</span></div>`;
            document.body.appendChild(this.obj);
            this.setData();
        }
        Dialog.prototype.setData = function() {
            this.obj.style.width = this.settings.width + 'px';
            this.obj.style.height = this.settings.height + 'px';
            this.obj.style.background = this.settings.background;

            if (this.settings.dir == 'center') {
                this.obj.style.left = (viewWidth() - this.obj.offsetWidth)/2 + 'px';
                this.obj.style.top = (viewHeight() - this.obj.offsetHeight)/2 + 'px';
            } else if (this.settings.dir == 'rightBottom') {
                this.obj.style.left = (viewWidth() - this.obj.offsetWidth) + 'px';
                this.obj.style.top = (viewHeight() - this.obj.offsetHeight) + 'px';
            }
        }
        Dialog.prototype.close = function() {
            var oClose = this.obj.getElementsByTagName('span')[1];
            var _this = this;
            oClose.onclick = function() {
                if (_this.settings.mask) {
                    document.body.removeChild(_this.oMask);
                }
                document.body.removeChild(_this.obj);
                _this.json[_this.settings.iNow] = true;
            }
        }
        Dialog.prototype.createMask = function() {
            var oMask = document.createElement('div');
            oMask.id = 'mask';
            this.oMask = oMask;
            oMask.style.width = viewWidth() + 'px';
            oMask.style.height = viewHeight() + 'px';
            document.body.appendChild(oMask)
        }
        function extend(obj1,obj2) {
            for (var attr in obj2) {
                if (obj2.hasOwnProperty(attr)) {
                    obj1[attr] = obj2[attr];
                }
            }
        }
        function viewWidth() {
            return document.documentElement.clientWidth;
        }

        function viewHeight() {
            return document.documentElement.clientHeight;
        }
    </script>
</body>
</html>