移动端alert()方法重构

需求

系统默认的 window.alert() 方法，在不同的浏览器下显示不同，但是都会有个网址标题

显然，这个网址标题不是我们想要的，需要自定义。

网上找了一些方法，但都不是很理想，那就自己重构吧。

实现

先创建一个方法，满足 alert 与 confirm 的基本需求

注：window.confirm() 方法存在回调，笔者目前没有找到用JS原生的方法实现，故用回调的方法代替，与原生的逻辑存在差异

/* 参数说明
 * @title => String, 标题, 非必填, 默认值为"提示"
 * @msg => String, 内容, 非必填, 默认值无
 * @type => Number, 类型，0为alert提示框，非0为confirm提示框, 非必填, 默认值0
 * @callbak => Function, 点击按钮回调，confirm方法有回调参数，取消返回false，确认返回true, 非必填, 默认值无
 */
function openAlert(title, msg, type, callback) {
    var v = document.createElement("div");
    var s = document.createElement("div");
    s.style.cssText = "width:100%;height:100%;position:absolute;top:0;left:0;background:rgba(0,0,0,0.5);";
    v.appendChild(s);
    var b = document.createElement("div");
    b.style.cssText = "width:80%;position:absolute;top:50%;left:50%;background:#fff;border-radius:4px;overflow:hidden;transform:translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);";
    title = title || '提示';
    var t = document.createElement("div");
    t.style.cssText = "font-size:16px;text-align:center;line-height:20px;padding:20px 10px 10px;color:#333;font-weight:bold;";
    t.innerHTML = title;
    b.appendChild(t);

    msg = msg || '';
    if (msg) {
      var m = document.createElement("div");
      m.style.cssText = "font-size:16px;text-align:center;padding:10px;color:#888;";
      m.innerHTML = msg;
      b.appendChild(m);
    }
    v.appendChild(b);

    type = type || 0;
    var f = document.createElement("div");
    f.style.cssText = "border-top:1px solid #eee;display:-webkit-flex;display:flex;margin-top:10px;";
    if (type != 0) {
      var b1 = document.createElement("div");
      b1.style.cssText = "-webkit-flex:1;flex:1;font-size:16px;text-align:center;padding:15px;color:#888;font-weight:bold;border-right:1px solid #eee;";
      b1.innerHTML = "取消";
      f.appendChild(b1);
      b1.onclick = function() {
          typeof callback == 'function' && callback(false);
          document.body.removeChild(v);
      };
    }
    var b2 = document.createElement("div");
    b2.style.cssText = "-webkit-flex:1;flex:1;font-size:16px;text-align:center;padding:15px;color:#556993;font-weight:bold;";
    b2.innerHTML = "确认";
    b2.onclick = function() {
        typeof callback == 'function' && callback(true);
        document.body.removeChild(v);
    };
    f.appendChild(b2);

    b.appendChild(f);
    document.body.appendChild(v);
}

挂载到 window

window.alert = function(msg, callback) {
    openAlert('提示', msg, 0, function() {
        typeof callback == 'function' && callback();
    });
};

window.confirm = function(msg, callback) {
    openAlert('提示', msg, 1, function(boo) {
        typeof callback == 'function' && callback(boo);
    });
};

注：前文提到 重构的confirm() 与原本的存在差异，故直接挂载可能并不友好，可以根据自己的需求挂载到别的参数，如： window.confirm1