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

重写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