基于html5手机移动端对话框特效

html    演示地址：http://www.w2bc.com/demo/201511/2015-11-01-html5-mobile-alter-info/index.html

<center>
        <input type="button" id="success" value="成功" />
        <input type="button" id="error" value="错误" />
        <input type="button" id="load" value="正在加载" />
        <input type="button" id="tip" value="提示" />
    </center>
 
    <script type="text/javascript" src="zepto.min.js"></script>
    <script type="text/javascript" src="mdialog.js"></script>
    <script type="text/javascript">
        //成功
        $("#success").click(function () {
            new TipBox({ type: 'success', str: '操作成功', hasBtn: true });
        });
        //错误
        $("#error").click(function () {
            new TipBox({ type: 'error', str: '对不起,出错了!', hasBtn: true });
        });
 
        //提示
        $("#tip").click(function () {
            new TipBox({ type: 'tip', str: '这是提示信息', clickDomCancel: true, setTime: 10000500, hasBtn: true });
        });
 
        //加载
        $("#load").click(function () {
            new TipBox({
                type: 'load', str: "努力加载中..", setTime: 1500, callBack: function () {
                    new TipBox({ type: 'success', str: '操作成功', hasBtn: true });
                }
            });
        });
 
    </script>