BeAlert 一款alert和confirm美化插件

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

 12681  43  查看评论 (6)
BeAlert 一款alert和confirm美化插件 ie兼容8

BeAlert

这是一个美化版的alert和confirm弹出框插件,适用于IE7+、chrome、Edge、fireFox、Safari等绝大多数浏览器。 功能可自己拓展,这里只是一个基础版本的插件 ,能够取代系统自带的alert和confirm。

How to use?

1、需要jquery的支持,所以请先确认已经引入jquery文件;

<script src="jquery.min.js"></script>

2、添加css和js文件到你的页面中

<link rel="stylesheet" href="BeAlert.css">
<script src="BeAlert.js"></script>

3、按说明调用函数

alert(title,message,callback,config);
confirm(title,message,callback,config);

Settings

参数默认值描述
titlenull标题
messagenull内容
callbacknull回调函数
confignull配置参数:
           width:  宽度,
           height: 最小高度,
           type: 'warning'|'error'|'success'|'info'|'question',
           showConfirmButton: 是否显示确认按钮,
           showCancelButton: 是否显示取消按钮,
           confirmButtonText: '确认',
           cancelButtonText: '取消'

Example

<script type="text/javascript">
    $(function () {
        $("#alert").click(function () {
            alert("Hello world!", "welcome to my world :)", function () {
                //after click the confirm button, will run this callback function
            }, {type: 'success', confirmButtonText: 'OK'});
        });
        $("#confirm").click(function () {
            confirm("Are you sure?", "You will not be able to recover this imaginary file!", function (isConfirm) {
                if (isConfirm) {
                    //after click the confirm
                } else {
                    //after click the cancel
                }
            }, {confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, cancel plx!', width: 400});
        });
    });
</script>


相关插件-对话框,弹出层

JQuery话框插件-LeanModal

LeanModal是一个用于创建模式对话框的超级简单JQuery插件。可以展示隐藏的页面内容,整个插件大小只有780bytes,可灵活变化高度和宽度,没有用到任何图片,支持在一个页面中创建多个实例,非常适合于创建:登录框,注册框,警告对话框等。
  对话框
 25149  23

TourBus jQuery

一个轻量级的工具进行互动的网站/应用之旅。
  对话框
 7955  1

jquery仿微信聊天对话窗口滚动样式

jquery仿微信聊天对话窗口滚动样式
  对话框
 12070  24

对话框jQuery插件Zebra_Dialog

Zebra_Dialog是一个可灵活配置的对话框jQuery插件,大小只有4KB,要求jQuery 1.5.2+支持。可用于替换JavaScript原始的“alert” 和“confirmation”对话框。
  对话框
 16339  7

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

    天涯浪子 0
    2017/8/15 15:34:44

    谢谢分享!!!!!!!!!!!!

    回复
    zzatt 0
    2017/3/28 11:29:37
    连谷歌都不兼容......
        zzatt0
        2017/3/28 11:56:42
        不好意思,自己代码弄成异步了,谷歌可以用!!!
    回复
    lee 0
    2017/3/7 14:54:32

    你这配置参数必须需要添加?怎么我没打勾的图片?

    回复
    0
    2016/12/16 10:12:02

    手机不能自适应

        wake0
        2017/3/15 17:07:44

        不能自适应么 ??? 

    回复
取消回复