PostbirdAlertBox.js

原生javascript弹框插件

在线体验：

http://postbird.oschina.io/postbirdalertbox.js/

更新

• 2018-07-08

  • 修复由于 button focus 状态未清除导致的 enter 下重复触发的问题
  • 将 focus 重定向到弹框的 button 中，默认 enter 键操作时 alert/confirm 的确认操作

优点：

• 无需手动写入html
• 支持回调
• 可配置性高，多种显示选择

使用方式：

1. 引入文件：

postbirdAlertBox.js
postbirdAlertBox.css

2. 调用方式：

1) alert

        PostbirdAlertBox.alert({
            'title': '提示',
            'content': '提示内容主体',
            'okBtn': '好的',
            'contentColor': 'red',
            'onConfirm': function () {
                console.log("回调触发后隐藏提示框");
                alert("回调触发后隐藏提示框");
            }
        });

2) confirm

        PostbirdAlertBox.confirm({
            'title': '提示',
            'content': '离开本页面进行跳转',
            'okBtn': '好的',
            'contentColor': 'red',
            'onConfirm': function () {
                console.log("OK - 回调触发后隐藏提示框");
                alert("OK - 回调触发后隐藏提示框");
            },
            'onCancel': function () {
                console.log("Cancel-回调触发后隐藏提示框");
                alert("Cancel-回调触发后隐藏提示框");
            }
        });

3) prompt

        PostbirdAlertBox.prompt({
            'title': '请输入姓名',
            'okBtn': '提交',
            onConfirm: function (data) {
                console.log("输入框内容是：" + data);
                alert("输入框内容是：" + data);
            },
            onCancel: function (data) {
                console.log("输入框内容是：" + data);
                alert("输入框内容是：" + data);
            },
        });

配置选项：

参数属性	意义	适用方法	是否必须
title	弹框标题	alert、confirm（不适用于prompt）	否，默认 : 提示信息
promptTitle	prompt标题	prompt	否，默认 :请输入内容
content	提示内容主体	alert、confirm（不适用于prompt）	否，默认 : 提示内容
contentColor	提示内容颜色	alert、confirm	否，默认 : #000000
okBtn	确认按钮文字	alert、confirm （不适用于prompt）	否，默认 : 好的
promptOkBtn	prompt确认按钮文字	prompt	否，默认 : 确认
okBtnColor	确认按钮颜色	alert、confirm、prompt	否，默认 : #0e90d2
cancelBtn	取消按钮文字	alert、confirm、prompt	否，默认 : 取消
onConfirm	确认按钮事件	alert、confirm、prompt(存在参数data)	否，默认 : 不触发事件
onCancel	取消按钮事件	alert、confirm、prompt(存在参数data)	否，默认 : 不触发事件

效果：

Alert

Confirn

Prompt