Code Monkey home page Code Monkey logo

postbirdalertbox.js's Introduction

PostbirdAlertBox.js

原生javascript弹框插件

在线体验:

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

优点:

  • 无需手动写入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

postbirdalertbox.js's People

Contributors

postbird avatar

Stargazers

Roman avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.