纯js封装一个多功能弹出框
不借助其它的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为了使用起来更加方便，封装的代码直接实例化了对象。在这个情况下，尽量不要一次弹出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下载