700字范文 > 纯js封装一个多功能弹出框

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

时间：2024-03-07 08:26:14

相关推荐

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

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

原创内容，请勿转载。

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

先上效果图

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

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

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

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

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

5、弹出一个询问框：

6、等待框

封装实现：

为了使用起来更加方便，封装的代码直接实例化了对象。在这个情况下，尽量不要一次弹出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': '/'});

注意事项：你可以在第三个参数中，指定 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下载

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。