Web弹出类似Android的Toast的信息提示

web js的alert弹出框,有时候并不是我们想要的,但是有时候又想给用户友好的提示,看了android的toast提示框也可在web前端实现。

// JavaScript Document
//  prompt message

function warn(msg, opt, left, top) {
    if (opt) {
        var obj = $("#" + opt);
    }
    new Toast({
        context: $('body'),
        message: msg
    }, obj, left, top).show();

}
var Toast = function(config, obj, left, top) {
        this.context = config.context == null ? $('body') : config.context; //上下文
        this.message = config.message; //显示内容
        this.time = config.time == null ? 3000 : config.time; //持续时间
        this.left = config.left; //距容器左边的距离
        this.top = (screen.availHeight / 4) * 3; //距容器上方的距离
        if (obj) {
            this.left = obj.offset().left + left;
            this.top = obj.offset().top + top;
        }
        this.init();
    }
var msgEntity;
Toast.prototype = {
    //初始化显示的位置内容等
    init: function() {
        $("#toastMessage").remove();
        //设置消息体
        var msgDIV = new Array();
        msgDIV.push('<div id="toastMessage">');
        msgDIV.push('<span>' + this.message + '</span>');
        msgDIV.push('</div>');
        msgEntity = $(msgDIV.join('')).appendTo(this.context);
        //设置消息样式
        var left = this.left == null ? this.context.width() / 2 - msgEntity.find('span').width() / 2 : this.left;
        var top = this.top == null ? '20px' : this.top;
        msgEntity.css({
            position: 'absolute',
            top: top,
            'z-index': '99',
            left: left,
            'background-color': 'black',
            color: 'white',
            'font-size': '12px',
            padding: '5px',
            margin: '5px',
            'border-radius': '4px',
            '-moz-border-radius': '4px',
            '-webkit-border-radius': '4px',
            opacity: '0.5',
            'font-family': '微软雅黑'
        });
        //msgEntity.addClass(".toast");
        msgEntity.hide();
    },
    //显示动画
    show: function() {
        msgEntity.fadeIn(this.time / 2);
        msgEntity.fadeOut(this.time / 2);
    }

}

最多阅读

getAttribute和getAttributeNode 1年以前  |  1587次阅读
Web弹出类似Android的Toast的信息提示 1年以前  |  1354次阅读
一种很帅的JS代码书写方式 1年以前  |  1346次阅读
Chrome 滚动条冻结现象 1年以前  |  1330次阅读
通过jQuery发送ajax请求 1年以前  |  1226次阅读
js为object动态添加属性 1年以前  |  1095次阅读
[小Tip]Webkit下设置hash的一个坑 1年以前  |  1018次阅读
AMD 的 CommonJS wrapping 1年以前  |  997次阅读
用Opera Mobile调试手机版网页 1年以前  |  835次阅读
jQuery获取Select选择的Text和Value 1年以前  |  679次阅读
JavaScript跨平台(兼容各个平台)事件 1年以前  |  382次阅读
JavaScript中克隆对象 1年以前  |  348次阅读
用JavaScript添加style节点 1年以前  |  347次阅读
JavaScript字符与ASCII码间的转换 1年以前  |  343次阅读
合并两个Array并去掉重复项 1年以前  |  340次阅读
判断一个对象是否为数组 1年以前  |  330次阅读