78JS插件：原生版弹窗（面对对象）

HTML弹窗实现

最新推荐文章于 2023-09-26 14:36:48 发布

weixin_30651273

最新推荐文章于 2023-09-26 14:36:48 发布

阅读量129

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10967074.html

本文介绍了一种使用HTML、CSS和JavaScript实现的弹窗效果，包括背景遮罩和居中显示的对话框，提供了完整的代码示例。

```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹窗</title>
    <style>
        .dialog {
            background: grey;
            width: 150px;
            height: 30px;
            font-size: 25px;
            font-family: "楷体";
            border-radius: 5px;
            user-select:none;
        }
    </style>
</head>
<body>
<div class="dialog" onclick="new Dialog({width:800,height:300})">点击出现弹窗</div>
<script>
    var Dialog = (function () {
        function DialogInner(options) {
            this.options = {
                width: 200,
                height: 100
            };
            this.init(options);
        }
        DialogInner.prototype.extend = function (son, parent) {
            for (var attr in parent) {
                son[attr] = parent[attr];
            }
        };
        DialogInner.prototype.killMark = function () {
            this.closeButton = document.getElementById("closeButton");
            var that = this;
            this.closeButton.onclick = function () {
                document.body.removeChild(that.makeBackground);
                document.body.removeChild(that.makeMark)
            }
        };
        DialogInner.prototype.init = function (options) {
            this.extend(this.options, options);
            this.screenWidth=document.documentElement.clientWidth|| document.body.clientWidth;
            this.screenHeight=document.documentElement.clientHeight|| document.body.clientHeight;
            this.makeBackground = document.createElement("div");//创建一个全屏遮罩
            this.makeBackground.style.position = "absolute";
            this.makeBackground.style.top = 0;
            this.makeBackground.style.background = "red";
            this.makeBackground.style.opacity = 0.6;
            this.makeBackground.style.left = 0;
            this.makeBackground.style.width = this.screenWidth+"PX";
            this.makeBackground.style.height = this.screenHeight+"PX";
            this.makeBackground.style.zIndex = 800;
            document.body.appendChild(this.makeBackground);
            this.makeMark = document.createElement("div");//创建一个在屏幕中央的弹窗
            this.makeMark.style.background = "rgba(0,0,0,1)";
            this.makeMark.style.zIndex = 1000;
            this.makeMark.style.width = this.options.width + "px";
            this.makeMark.style.height = this.options.height + "px";
            this.makeMark.style.position = "absolute";
            this.makeMark.style.top = 0;
            this.makeMark.style.right = 0;
            this.makeMark.style.bottom = 0;
            this.makeMark.style.left = 0;
            this.makeMark.style.margin = "auto";
            document.body.appendChild(this.makeMark);
            this.closeMark = document.createElement("div");
            this.closeMark.innerHTML = '<div style="position: absolute;right:20px;bottom:20px"><button id="closeButton">关闭弹窗</button></div>';
            this.makeMark.appendChild(this.closeMark);
            this.killMark();
        };
        return DialogInner;
    })();
</script>
</body>
</html>
```