前端：手机移动端重写网页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&＃8230;

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