手机/P各种提示框整合,纯js实现,比前端大多数框架的提示消息更好用

dome下载地址:https://files.cnblogs.com/files/han-guang-xue/%E4%B8%87%E8%83%BDAlert%E6%8F%90%E7%A4%BA%E6%A1%86.zip

下载好dome之后:打开 index.html页面

html页面如下:建议用自己的工具打开直接看比较方便

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>万能提示框整合</title>
    <link rel="stylesheet" type="text/css" href="css/iziToast.min.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.alertable.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/iziToast.min.js"></script>
    <script src="js/jquery.alertable.js"></script>
    <script src="js/velocity.min.js"></script>
    <script src="js/velocity.ui.min.js"></script>    
</head>
<body>
    <center>
        <div style="height:100%;100%;line-height:150px;background:#FFFFFF">
            <a onclick="Alert_info()">点我</a>
        </div>
        <script>
function Alert_info(ele) {
    b_buttons='<button onclick=A_alert("success",1000,"你好啊!","我的笨笨","flipInX",true,true)>Photo</button>%'+
        '<button onclick=A_modal_alert()>Photo</button>%'+
        '<button onclick=A_modal_confirm()>Photo</button>%'+
        '<button onclick=A_modal_prompt()>Photo</button>';
    A_alert("error",40000,"你好啊!","我的笨笨","bottomLeft",true,true,b_buttons,
            '1.png',30)
}

/**
 * 万能Alert提示框    a_ 开头的是必填的 b_开头的可以不写
 * @param a_type    @提示类型 eg:'warning':警告(橙色) 'info': 普通(蓝色) 'success':成功(绿) 'error':红色
 * @param a_time    @显示时间 eg:1000(1s)
 * @param a_title    @标题 eg:HelloWord!
 * @param a_message @信息 eg:我的笨笨
 * @param a_direction     @方向 手机端不分左右 topLeft:上面左边 topRight:顶部右边 topCenter：顶部中间  flipInX:中间 bottomLeft:底部左边; bottomCenter：底部中间
 * @param a_close        @关闭按钮 false || true
 * @param a_progressBar    @进度条 false || true
 * @param b_buttons        @按钮 参数可选,可添加多个按钮 eg:'<button>Photo</button>%<button>Photo</button>'
 * @param b_image        @图片 图片,参数 图片路径 默认大小40px;  
 * @param b_imgWidht    @图片大小 图片,参数 默认大小40px;  eg:30
 */
function A_alert(a_type,a_time,a_title,a_message,a_direction,a_close,a_progressBar,b_buttons,b_image,b_imgWidht){
    var buttons_ = new Array();
    if(b_buttons!=undefined){
        var myBtns = b_buttons.split("%");
        for(var i = 0; i<myBtns.length; i++){
            buttons_[i] = new Array();    buttons_[i][0] = myBtns[i];
        }
    }
    if(b_image==undefined){ b_image=""; }
    iziToast.settings({
        timeout : a_time == 0 ? 1000 : a_time,
        close : a_close == 0 ? false : a_close,
        progressBar : a_progressBar == 0 ? false : a_progressBar,
        image: b_image.split("%")[0]==undefined ? "" : b_image.split("%")[0],
        imageWidth: b_imgWidht==undefined ? 40 : b_imgWidht,
        buttons:buttons_,
    });
    var data = {
        title : a_title == 0 ? "":a_title,
        message : a_message == 0? "":a_message,
        position : a_direction ==0 ?"topLeft":a_direction,
    }
    switch (a_type){
        case "warning": iziToast.warning(data); break;
        case "success": iziToast.success(data); break;
        case "error": iziToast.success(data); break;
        default:iziToast.info(data);break;
    }
}
/**
 * modal提示框 a_ 开头的是必填的 b_开头的可以不写
 * @param a_type    @提示类型 eg:
 * @param a_message    @显示时间 eg:1000(1s)
 */
function A_modal_alert(){
    $.alertable.alert('Howdy!');
}

function A_modal_confirm(){
    $.alertable.confirm('Are You Sure?').then(function() {
        //点击确定之后执行的函数
       $.alertable.alert('You Clicked OK');
    }, function() {
       console.log('Cancel');      
    });
}
/**
 * show 和 hide 的方法可以查看网址
 * @https://www.cnblogs.com/many-object/p/9901751.html
 */
function A_modal_prompt(){
    $.alertable.prompt('How many?',{
          show: function() {
            $(this.overlay).velocity('transition.fadeIn');        
            $(this.modal).velocity('transition.flipBounceYIn');
          },
          hide: function() {
            $(this.overlay).velocity('transition.fadeOut');
            $(this.modal).velocity('transition.perspectiveUpOut');
          }
    }).then(function(data) {
        $.alertable.confirm("您输入的是："+data.value,{
              show: function() {
                $(this.overlay).velocity('transition.fadeIn');        
                $(this.modal).velocity('transition.flipBounceYIn');
              },
              hide: function() {
                $(this.overlay).velocity('transition.fadeOut');
                $(this.modal).velocity('transition.perspectiveUpOut');
              }
        }).then(function(){
            A_alert("success",1000,"嗯!操作完成的了!","666","topRight",true,true)
        });
    }, function() {
        A_alert("warning",1000,"嗯!你已取消","5555","topCenter",true,true)
    });
}

        </script>
    </center>
</body>
</html>

对每个方法的简介:

A_alert()方法是结合了各种提示参数的整合方法,可以直接引用过去当做一个公用的方法,通过传如参数调用

A_modal_alert();
A_modal_confirm();
A_modal_prompt();
这三个方法是一个范例,可以使用自己写方法去调用里面的方法和设置参数值