PostbirdAlertBox.js

—— 原生javascript弹框插件

Github:https://github.com/postbird/PostbirdAlertBox.js

GitOSC:https://gitee.com/postbird/PostbirdAlertBox.js

注:引入Bootstrap.min.css仅提供index.html页面内容显示,无其他作用

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

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

PostbirdAlertBox.prompt({
    'title': '请输入姓名',
    'okBtn': '提交',
    onConfirm: function (data) {
        console.log("输入框内容是:" + data);
        alert("输入框内容是:" + data);
    },
    onCancel: function (data) {
        console.log("输入框内容是:" + data);
        alert("输入框内容是:" + data);
    },
});
  • 1. 引入js 和 css 文件
  • 2. 通过全局对象 PostbirdAlertBox 调用相关方法,三个方法为: PostbirdAlertBox.alert({}); PostbirdAlertBox.confirm({}); PostbirdAlertBox.prompt({});
  • 参数属性 意义 适用方法 是否必须
    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) 否,默认 : 不触发事件
  • 1. title 和 promptTitle 分开主要是为了方便不传递title的情况,prompt和alert、confirm的显示文字不同
  • 2. okBtn 和 promptOkBtn 分开同样是为了默认情况下,prompt和alert、confirm的显示文字不同
  • 3. 正如前面的示例代码中,prompt的回调函数,会给予一个data参数,用来获取用户输入的内容
  • MIT