前端：手机移动端重写网页alert（隐藏网址提示以及样式参照iphone无标题样式）...

重写alert() 方法 展示效果如图

很简单 重写alert，两个div 做成伪提示框，同时加遮罩制止用户操作。

值得一提的是之前用的是

  window.alert = function(name){
 var iframe = document.createElement("IFRAME");
 iframe.id="iframes";
 iframe.style.display="none";
 iframe.setAttribute("src", 'data:text/html,');
 document.documentElement.appendChild(iframe);
 window.frames[0].window.alert(name);
 iframe.parentNode.removeChild(iframe);

这个应该是iframe中去再次弹出alert 这样就可以省略 Safari 作为内置浏览器时弹出的网页提示 (来自www.baidu.com的提示） 但是这种方法在安卓中 虽然取消了网址的提示 文字却无法展示在正中央
如下图

测试的姐觉得实在是太丑了 。。。。 参照ios 移动端的提示 做了一个模仿的alert

代码 ：

window.alert = function(name){
    //创建一个大盒子
    var box = document.createElement("div");
    var back = document.createElement("div");
    //创建一个关闭按钮
    back.id = "backg";
    document.body.appendChild(back);
    var button = document.createElement("div");
    //定义一个对象保存样式
    box.id="alertbox";
    //把创建的元素添加到body中
    document.body.appendChild(box);
    //把alert传入的内容添加到box中
    if(arguments[0]){
        box.innerHTML = arguments[0];
    }
    button.innerHTML = "确定";
    //定义按钮样式
    button.id="alertbutton";
    //把按钮添加到box中
    box.appendChild(button);
    //给按钮添加单击事件
    button.addEventListener("click",function(){
        document.body.removeChild(box);
        document.body.removeChild(back);//每次点击需要移除子元素，不然呵呵哒
    })
};

下面是css 代码 我用的淘宝的h5flexible布局所以rem如果对不上 可以看一下http://www.w3cplus.com/mobile...

css：

#alertbox{
  width: 60%;
    height: 2.2rem;
    background-color: rgb(248, 248, 248);
    position: absolute;
    top: 42%;
    left: 20%;
    word-wrap: break-word;
    font-size: 16px;
    font-weight:bold;
    z-index: 999;
    text-align: center;
    border-radius: 0.3rem;
    line-height: 1.2rem;
}

#alertbutton{
  border: 1px solid rgb(204, 204, 204);
    background-color: rgb(255, 255, 255);
    width: 100%;
   color:#61a7ea;
    height: 1rem;
    font-weight: normal;
    text-align: center;
    line-height: 1rem;
    outline: none;
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}

#backg{
  top:0;
  position:absolute;
  width:100%;
  height:100%;
  background:#000000;
  opacity:0.3;
  overflow:hidden;
  
}

成功！ 适用提示信息很少的时候，不建议直接alert某种后台返回的长长的json