原生js弹框插件PostbirdAlertBox.js

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

 8035  22  查看评论 (2)
原生js弹框插件PostbirdAlertBox.js ie兼容9

更新时间: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)否,默认 : 不触发事件
相关插件-弹出层,对话框

移动端弹出层jquery插件简易

移动端弹出层jquery插件简易
  弹出层
 21562  34

带动画效果jQuery+CSS3实现的弹出框弹出层效果

带动画效果jQuery+CSS3实现的弹出框弹出层效果
  弹出层
 46824  125

jquery鼠标悬停滑动切换特效

jquery鼠标悬停滑动切换特效
  弹出层
 10278  85

响应式模态框

简洁、弹出效果好的响应式模态框,适用移动端
  弹出层
 10566  74

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

    褚? 0
    2017/11/28 15:39:57
    0
    2017/11/20 17:55:30

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

    回复
取消回复