纯js封装一个多功能弹出框

WormJan

已于 2023-08-27 21:35:57 修改

阅读量5.9k

点赞数 3

文章标签： javascript 前端 vue.js

于 2022-05-30 18:09:58 首次发布

本文链接：https://blog.csdn.net/superfans98/article/details/125046385

版权

不借助其它的css代码和图片资源，可直接调用。

原创内容，请勿转载。

注意，不要直接复制文章里的封装代码，因为编辑器的原因，无论怎么编辑，它还是给修改了代码。文末提供了封装代码的下载地址（无需积分）

先上效果图

1、弹出一个类似prompt的输入框：

点击确定后，拿到输入的内容。点击取消关闭这个弹出框。

2、弹出一个自动消失的提示框：

3、弹出一个错误提示框：

4、弹出一个普通消息框：

5、弹出一个询问框：

6、等待框

封装实现：

function showmsgbox(id) {
	this.obj = id;
	this.result = "";
}
showmsgbox.prototype = {
	style: function (style) {
		switch (style) {
			case "wrong":
			case "error":
				infostyle =
					'data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E<defs><style>.error{fill:red}</style></defs>%3Cpath%20class="error"%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.763-15.864l.11%207.596h1.305l.11-7.596h-1.525zm.759%2010.967c.512%200%20.902-.383.902-.882%200-.5-.39-.882-.902-.882a.878.878%200%2000-.896.882c0%20.499.396.882.896.882z%22%2F%3E%3C%2Fsvg%3E';
				break;
			case "right":
				infostyle = 'data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E<defs><style>.right{fill:forestgreen}</style></defs>%3Cpath%20class="right"%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E';
				break;
			case "loading":
			case "showLoading":
				infostyle =
					'data:image/gif;base64,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';
				break;
			case 'confirm':
				infostyle = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAY1BMVEX///8/lf8/lf8/lf8/ lf8/lf8/lf8/lf8/lf8/lf8/lf8/lf8/lf8/lf8/lf8/lf8/lf9Xov+31//z+P/b6/+Hvf9j qf/D3v9LnP9vsP97tv+fyv/n8v/P5P+TxP+r0P+uPsg8AAAAEHRSTlMAGliOvOD3K4DRAWjNGIyY FB538gAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfmBR4PAwktQlG5 AAABCElEQVQ4y8WU2RKCMAxFtQsiuESJqIjV//9KAds0XRx50vvCBM60yU3CYvE/LYVUuii0kmL5 AVmVayCty1UGqeoNBNrUVcxsd5Bot42YPWS0D6iKzjkcG8RT687iN9aOOQ/IqIuNa1aXy/naYNN2 txNib7P3NZbuoB6xe7N3+6YkD8kfYz8aROeXc1VQOYgmgkBYSBLUdefp6a8DaSEV+/OgxAGUhXTE tINTFGgLFSFzG5grRUUWGupnDEHhdQ9sDizU2cR7fPJQJRZMaZuWhzIxMyORtCUVtcU3OBU12I/K qKdhibNR8UMHY3OND9jQsfENoWB8Zy3CvJWat5zz1nxy9fsP4xd6AcvoLo6BSLErAAAAJXRFWHRk YXRlOmNyZWF0ZQAyMDIyLTA1LTMwVDEyOjAzOjA5KzAzOjAw3pV8TwAAACV0RVh0ZGF0ZTptb2Rp ZnkAMjAyMi0wNS0zMFQxMjowMzowOSswMzowMK/IxPMAAAAASUVORK5CYII='
				break;
			case "info":
			default:
				infostyle =
					'data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E<defs><style>.error{fill:lightskyblue}</style></defs>%3Cpath%20class="error"%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.763-15.864l.11%207.596h1.305l.11-7.596h-1.525zm.759%2010.967c.512%200%20.902-.383.902-.882%200-.5-.39-.882-.902-.882a.878.878%200%2000-.896.882c0%20.499.396.882.896.882z%22%2F%3E%3C%2Fsvg%3E';
		}
		return infostyle;
	},
	show: function (message, style, config) {
		if (typeof config == 'undefined') {
			config = {};
		}
		var timeout = 1;
		var msg = document.createElement("div");
		if (typeof (config.timeout) == 'undefined') {
			try {
				var regex = /(<([^>]+)>)/gi;
				var final = message.replace(regex, "");
				timeout = final.length * 0.25;
			} catch (e) {
				timeout = 2.0;
			}
		} else {
			if (config.timeout > 300) {
				timeout  = config.timeout / 1000
			} else {
				timeout = config.timeout;
			}
		}
		rnd = Math.random() * 1000;
		msg.id = rnd;
		this.obj = msg;
		this.id = rnd;

		infostyle = this.style(style);
		var width_str = ""
		if (window.innerWidth > 500) {
			width_str = "width: fit-content; margin:0 auto;max-width:35%;"
		} else {
			width_str = "width: fit-content; margin:0 auto;max-width:85%;"
		}
		var html = ''
		if(style == '' || typeof style == 'undefined'){
			style = 'info';
		}
		if (style == 'right' || style == 'wrong' || style == 'error' || style == 'confirm' || style == 'info') {
			html = '<div data-rnd="' + rnd + '" id="cover_' + rnd + '" style="position: fixed;z-index: 4999;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0,0,0,0.6);"></div><div style="position: fixed; ' + width_str + ' z-index: 5000; top: 50%; left: 16px; right: 16px; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); background-color: #fff; text-align: center; border-radius: 12px; overflow: hidden; display: -webkit-box; display: -webkit-flex;  -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; max-height: 90%;"><div style="min-height: 40px; padding: 32px 24px 0; font-weight: 700;display: flex;-webkit-box-orient: vertical; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 24px; margin-bottom: 28px; font-size: 18px; line-height: 1.4; word-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; color: rgba(0,0,0,0.5); color: #444;padding: 32px 24px 0;">'
			if(style == 'confirm' || style == 'error' || style == 'wrong' || style == 'info'){
				html += '<img id="img_' + rnd + '" src=\'' + infostyle + '\' style="top: 50%; position: absolute; left: 10px; transform: translateY(-100%);display: inline-block; vertical-align: middle; width: 2.4em; height: 2.4em;"><div style="text-align:left; margin-left:40px; position:relative;" id="wm_content_' + rnd + '">' + message + '</div></div><div style="position:relative; border-top:1px solid #ccc;display:flex;">';
				if (typeof config.button != 'undefined') {
					for (var x in config.button) {
						html += '<a style="-webkit-box-flex: 1; -webkit-flex: 1; flex: 1; display: block; padding:11px 0; line-height: 1.41176471; font-size: 17px; color: #576b95; font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); position: relative; overflow: hidden;cursor:pointer;' + (x > 0 ? 'border-left:1px solid #ccc;' : '') + '" class="btn_'+ rnd + '" data-rnd="' + rnd + '" data-btn_index=' + x + '>' + config.button[x] + '</a>'
					}
				} else {
					html += '<a style="width:100%;padding:11px 0; display:block;font-size: 17px; color: #576b95; font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); overflow: hidden; cursor:pointer"' + 'class="btn_' + rnd + '" data-rnd="' + rnd + '">确定</a>';
				}
				html += "</div>";
			} else {
				html += '<img id="img_' + rnd + '" src=\'' + infostyle + '\' style="top: 50%; position: absolute; left: 10px; transform: translateY(-45%);display: inline-block; vertical-align: middle; width: 2.4em; height: 2.4em; cursor:pointer" onclick="document.body.removeChild(document.getElementById(' + rnd + '));"><div style="text-align:left; margin-left:40px;position:relative;" id="wm_content_' + rnd + '">' + message + '</div></div>';
			}
		} else if (style == 'loading') {
			html = '<div style="position: fixed;z-index: 19820828;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0,0,0,0);"></div><div style="position:fixed;top: 40%; left: 50%;z-index: 19820828; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); text-align: center; border-radius: 12px; color: rgba(255,255,255,0.9); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; background-color: #4c4c4c; box-sizing: border-box; line-height: 1.4;width: 10em;word-break: break-all;height: 10em; overflow:hidden "><img id="img_' + rnd + '" src="' + infostyle + '" style="position: absolute; top: 50%; transform:translateY(-100%);display: inline-block; vertical-align: middle; width: 3em; height: 3em;"><a style="font-size: 15px; top:60%; position:absolute; text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); overflow: hidden;padding:10px;color:#FFF;" id="wm_content_' + rnd + '">' + message + '</a></div>'
		} else if(style == 'input'){
			html = '<div id="mask'+ rnd +'" style="position: fixed;z-index: 4999;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0,0,0,0.6);"></div><div style="position: fixed; ' + width_str + ' z-index: 5000; top: 50%; left: 16px; right: 16px; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); background-color: #fff; text-align: center; border-radius: 12px; overflow: hidden; display: -webkit-box; display: -webkit-flex;  -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; max-height: 90%;"><div style="min-height: 40px; padding: 32px 24px 0; font-weight: 700;display: flex;-webkit-box-orient: vertical; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 24px; margin-bottom: 28px; font-size: 18px; line-height: 1.4; word-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; color: rgba(0,0,0,0.5); color: #444;padding: 32px 24px 0;">'
			html += '<div style="text-align:left; position:relative;"><div style="margin-bottom:10px" id="wm_content_' + rnd + '">' + message  + '</div><input type="text" id="input'+ rnd +'" style="width:100%;height:40px;outline: none;border: 1px solid #ccc; font-size:20px; padding:0 5px;font-weight: bold;" value="'+ (typeof config.default == 'undefined' ? '' : config.default) +'" /></div></div><div style="position:relative; border-top:1px solid #ccc;display:flex;">';
			if (typeof config.button != 'undefined') {
				for (var x in config.button) {
					html += '<a style="-webkit-box-flex: 1; -webkit-flex: 1; flex: 1; display: block; padding:11px 0; line-height: 1.41176471; font-size: 17px; color: #576b95; font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); position: relative; cursor:pointer;overflow: hidden;' + (x > 0 ? 'border-left:1px solid #ccc;' : '') + '" class="btn_'+ rnd + '" data-rnd="'+ rnd +'" data-btn_index=' + x + '>' + config.button[x] + '</a>'
				}
			} else {
				html += '<a style="width:100%;padding:11px 0; display:block;font-size: 17px; color: #576b95; font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); overflow: hidden; cursor:pointer;cursor:pointer;"' + 'class="btn_' + rnd + '" data-rnd="'+ rnd +'"  data-btn_index=0>取消</a>';
				html += '<a style="width:100%;padding:11px 0; display:block;font-size: 17px; color: #576b95; font-weight: 700; text-decoration: none; border-left:1px solid #ccc; -webkit-tap-highlight-color: rgba(0,0,0,0); overflow: hidden; cursor:pointer;cursor:pointer"' + 'class="btn_' + rnd + '" data-rnd="'+ rnd +'" data-btn_index=1>确定</a>';
			}
			html += "</div>";	
		}
		
		html += '</div>'
		msg.innerHTML = html;
		document.body.appendChild(msg);

		var btns = document.getElementsByClassName('btn_' + rnd);
		if (style == 'confirm' || style == 'error' || style == 'info' || style == 'wrong') {
			for (var x in btns) {
				if (typeof btns[x] == 'object') {
					btns[x].addEventListener('click', function (e) {
						try {
							var btn_rnd = this.getAttribute('data-rnd');
							document.body.removeChild(document.getElementById(btn_rnd));
						} catch (e) {
							
						}
						if (typeof config.click != 'undefined') {
							config.click(this.getAttribute('data-btn_index'));
						}
					});
				}
			}
		}
		if (style == 'input') {
			for (var x in btns) {
				if (typeof btns[x] == 'object') {
					var that = this;
					btns[x].addEventListener('click', function (e) {
						var inp_val = document.getElementById('input' + rnd).value;
						try {
							var btn_rnd = this.getAttribute('data-rnd');
							document.body.removeChild(document.getElementById(btn_rnd));
						} catch (e) {
							
						}
						if (typeof config.click != 'undefined') {
							that.result = inp_val;
							config.click(this.getAttribute('data-btn_index'));
						}
					});
				}
			}
			var textbox = document.getElementById('input' + rnd);
			var n = textbox.value.length
			textbox.focus();
			if (navigator.userAgent.indexOf("MSIE") == -1) {
				document.getElementById('input' + rnd).setSelectionRange(n, n);				
			} else {
				var range = document.selection.createRange();
				var textRange = textbox.createTextRange();
				textRange.moveStart('character', n);
				textRange.collapse();
				textRange.select();
			}
		}
		if (style == 'right') {
			document.getElementById('cover_' + rnd).addEventListener('click', function (e) {
				try {
					var btn_rnd = this.getAttribute('data-rnd');
					document.body.removeChild(document.getElementById(btn_rnd));
				} catch (e) {
					
				}
			});
			setTimeout(function () {
				if(document.getElementById(rnd)){
					document.body.removeChild(msg);
				}
				if (typeof config.redirect != 'undefined') {
					location.href = config.redirect;
				}
			}, timeout * 1000);
		}
		return this;
	},
	close: function (who) {
		console.log(who)
		document.body.removeChild(document.getElementById(who.id));
	},
	showtext: function (text) {
		try {
			document.getElementById('wm_content_' + this.id).innerHTML = text;
		} catch (e) {
			console.error("catched error:" + e);
		}
	}
};
var msgbox = new showmsgbox();

为了使用起来更加方便，封装的代码直接实例化了对象。在这个情况下，尽量不要一次弹出2个及以上的弹窗。如果需要这样做，请自行实例化一个对象，使用此对象弹出窗口。例如：var mymsgbox = new showmsgbox();

mymsgbox.show("aaa')

使用方法：

说明：right类型的弹窗，可以自动关闭，也可以通过点击遮罩层关闭，也可以点击图标关闭。其它类型的弹窗，必须点击弹出窗口上的按钮关闭弹窗。

关于参数timeout的单位，如果你觉得是毫秒，它就是毫秒，如果你觉得是秒，它就是秒。你说了算。不必纠结。比如你想2秒关闭弹窗，你即可以写2，也可以写2000

调用方法始终只有一个，也就是 show()。

参数有三个：

第一个是要显示的内容。

第二个是弹窗类型，有以下几种类型：

'right':正确提示。
'error'：错误提示。
'info'：普通信息。
'confirm'：确认框
'loading' : 加载中
‘input’：内容输入框

第三个参数为json对象。可写的配置请看下面的示例。

1、弹出一个自动关闭的窗口

msgbox.show("操作成功", 'right');

如果希望用户点击之后跳转其它页面，请在第三个参数里写"redirect"，例如：

msgbox.show("操作成功", 'right', {'redirect': 'https://blog.csdn.net/'});

注意事项：你可以在第三个参数中，指定 timeout 参数（和redirect同级），来决定这个弹窗多久之后自动关闭。若不指定，系统根据字数的多少计算出多久之后自动关闭。计算规则为 4个汉字为一秒。并且用户点击遮罩层可以自主关闭弹窗。

2、弹出一个错误提示窗口

msgbox.show("操作失败", 'error')

上面是最简单的调用。系统会给出一个确定按钮。点击后关闭弹窗。如果想玩点花样，可以这样调用：

msgbox.show("对不起，操作失败", 'error', {
        button:['算了吧', '重试一下'],
        click: function(e){
            if(e == 0){
                alert('你点的 算了吧');
            } else if(e == 1){
                msgbox.show("你点的 重试一下");
            }
        }
    });

即在第三个参数中，传入你希望显示的按钮button(它是数组)，以及点击按钮后的回调函数click

click函数的参数 e 是你点的第几个按钮。这个第几个按钮，是根据上面按钮数组的索引返回的。可以根据e来判断用户点击了哪个按钮。

3、弹出一个类似prompt的输入框

msgbox.show("请输入姓名", "input", {
        button: ['取消', '确定'],
        default: "WormJan",
        click:function(e){
            msgbox.show("你点的第" + e + "个按钮");
            if(e == 1){
                alert("输入的名字是" + msgbox.result)
            } else{
                alert("取消操作")
            }
        }
    })

注意：如果不需要指定默认的值，第三个参数中可以省略default 参数。只指定 button 和 click即可。如果不指定button，系统默认会给一个取消和一个确定按钮。

4、弹出一个等待框：

var loading = msgbox.show("正在拉屎，请稍候", 'loading');

msgbox.showtext("拉完屎了，什么事？");

注意：showtext 用于更改等待时显示的内容。当然如果不喜欢可以不写。反正等待的不是你是用户。这里有一个非常重要的一点，如果你一次弹出了两个窗口，比如一个正确提示一个等待框，如果使用默认的对象（即msgbox），可能不会在等待框上显示文本变化。如果有这个需求，墙裂建议新定义一个对象来显示这个等待框。例如：

var msg = new showmsgbox();
    var loading = msg.show("正在拉屎，请稍候", 'loading');
    setTimeout(function(){
        msg.showtext("爽，拉完了");
        setTimeout(function(){
            msg.close(loading)
        }, 1000)
    }, 1000)
    
    msgbox.show("请输入姓名", "input", {
        button: ['取消', '确定'],
        default: "WormJan",
        click:function(e){
            msgbox.show("你点的第" + e + "个按钮");
            if(e == 1){
                alert("输入的名字是" + msgbox.result)
            }
        }
    })

这时候，两个弹窗就互不影响了。

询问框和普通消息框如何使用，在你认真阅读了上面的内容后，我相信即使我不写示例代码，你已经可以自己写了。

我先去拉屎了，有问题请评论留言。

封装代码下载地址：

纯js封装一个多功能弹出框，兼容PC和移动端-Javascript文档类资源-CSDN下载

WormJan

关注

3
点赞
踩
20

收藏

觉得还不错? 一键收藏
3
评论
纯js封装一个多功能弹出框

先上效果图1、弹出一个类似prompt的输入框：点击确定后，拿到输入的内容。点击取消关闭这个弹出框。2、弹出一个自动消失的提示框：3、弹出一个错误提示框：4、弹出一个普通消息框：5、弹出一个询问框：6、等待框封装实现：function showmsgbox(id) { this.obj = id; this.result = "";}showmsgbox.prototype = { style: function (style) .
复制链接

扫一扫

纯js封装一个多功能弹出框

“相关推荐”对你有帮助么？