原生js弹框插件PostbirdAlertBox.js

所属分类:UI-弹出层,对话框

 10240  26  查看评论 (9)
原生js弹框插件PostbirdAlertBox.js ie兼容9

更新时间:2018/7/8 上午12:14:57

更新说明:修复在使用 button 触发的时候,由于 focus 未清除导致 enter键下重复触发问题。
将 focus 移到 弹框的 button 上,enter键默认表示用户同意操作。


更新时间:2017/10/17 下午5:27:22

更新说明:修复bug,confirm中content和contentColor配置选项未添加


PostbirdAlertBox.js

原生javascript弹框插件

优点:无需手动写入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)否,默认 : 提示信息
promptTitleprompt标题prompt否,默认 :请输入内容
content提示内容主体alert、confirm(不适用于prompt)否,默认 : 提示内容
contentColor提示内容颜色alert、confirm否,默认 : #000000
okBtn确认按钮文字alert、confirm (不适用于prompt)否,默认 : 好的
promptOkBtnprompt确认按钮文字prompt否,默认 : 确认
okBtnColor确认按钮颜色alert、confirm、prompt否,默认 : #0e90d2
cancelBtn取消按钮文字alert、confirm、prompt否,默认 : 取消
onConfirm确认按钮事件alert、confirm、prompt(存在参数data)否,默认 : 不触发事件
onCancel取消按钮事件alert、confirm、prompt(存在参数data)否,默认 : 不触发事件
相关插件-弹出层,对话框

漂亮实用的提示框插件SweetAlert

漂亮实用的提示框插件SweetAlert
  弹出层
 30445  365

jQuery弹框、弹出层插件method.js

jq弹框 弹框标题、内容、宽高、取消确认按钮、关闭按钮、动效类型均可以参数的形式设置
  弹出层
 17033  86

vue弹窗插件vuemessage

一个基于vue的弹窗插件vuemessage
  弹出层
 17125  36

移动端弹出层jquery插件简易

移动端弹出层jquery插件简易
  弹出层
 23600  35

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币

    别忘了最初的自己 0
    2018/7/6 17:55:15
    怎么点击蒙层让弹框隐藏呢?
        Postbird0
        2018/7/8 0:14:07
        这个不是 modal,模拟的是 alert/confirm 因此设计的时候没有设计点击蒙层消失,强制用户确认操作。
    回复
    山南水北 0
    2018/6/8 14:19:30
    兄弟,这个弹出框,在按 enter后有问题啊,会一直弹出的
        Postbird0
        2018/7/8 0:13:25
        这是由于 button 的 focus 没有清除掉,新版中这个问题已经解决,并且将 focus 状态重定向到弹框的 button 中,按回车默认是确定操作。https://github.com/postbird/PostbirdAlertBox.js
    回复
    褚? 0
    2017/11/28 15:39:57
    0
    2017/11/20 17:55:30

    这个可以加HTML么,就是这个怎么加入HTML代码

        Postbird0
        2018/5/16 16:42:40
        不可以,只是纯粹模拟 alert/confirm/prompt。
        小灰灰0
        2018/5/23 11:28:07
        可以添加,在js里有拼接
        小灰灰0
        2018/5/23 15:45:06
        但是传数据什么的用不着,只是个弹框
    回复
取消回复