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

sf190404 发布于2019-08-01 17:52 / 2815人阅读

摘要：重写方法展示效果如图很简单重写，两个做成伪提示框，同时加遮罩制止用户操作。

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

云服务器 GPU云服务器 html修改标题样式网页样式设计移动html单选样式 asp网页样式代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51423.html

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

摘要：重写方法展示效果如图很简单重写，两个做成伪提示框，同时加遮罩制止用户操作。重写alert() 方法展示效果如图 showImg(https://segmentfault.com/img/bVXBv8?w=406&h=202); 很简单重写alert，两个div 做成伪提示框，同时加遮罩制止用户操作。值得一提的是之前用的是 window.alert = function(...

Kross 2019-08-30 13:50 评论0 收藏0
前端：手机移动端重写网页alert（隐藏网址提示以及样式参照iphone无标题样式）

摘要：重写方法展示效果如图很简单重写，两个做成伪提示框，同时加遮罩制止用户操作。重写alert() 方法展示效果如图 showImg(https://segmentfault.com/img/bVXBv8?w=406&h=202); 很简单重写alert，两个div 做成伪提示框，同时加遮罩制止用户操作。值得一提的是之前用的是 window.alert = function(...

mylxsw 2019-08-22 11:13 评论0 收藏0
web前端 —— 移动端知识的一些总结

摘要：打个招聘广告杭州阿里巴巴招前端想去西溪的也可帮推荐，比较缺人，机会多多广告位长期有效，有兴趣简历我邮箱个人在移动端的一些总结归纳，有新的知识点会一直更新一部分用做动画时，变形尽量通过来实现，而不是用，等属性。不过的事件有一个事件穿透的问题。打个招聘广告：杭州阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：854936875@q...

BetaRabbit 2019-08-22 10:58 评论0 收藏0
web前端 —— 移动端知识的一些总结

摘要：打个招聘广告杭州阿里巴巴招前端想去西溪的也可帮推荐，比较缺人，机会多多广告位长期有效，有兴趣简历我邮箱个人在移动端的一些总结归纳，有新的知识点会一直更新一部分用做动画时，变形尽量通过来实现，而不是用，等属性。不过的事件有一个事件穿透的问题。打个招聘广告：杭州阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：854936875@q...

Astrian 2019-08-28 18:19 评论0 收藏0
[总结]CSS/CSS3常用样式与web移动端资源

摘要：不允许负值用百分比来定义缩放比例。解决这个很简单，在父元素中使用即可解决该。列宽度由单元格内容设定。定义仅有大写字母。不过，要让任何元素生效还得借助于一点点。 css/css3常用样式 CSS修改选中文字的颜色 html代码：第一段文字选中效果第二段文字选中效果 css代码： .p1::selection{background:red;color:#fff;} .p2::selec...

The question 2019-08-28 17:54 评论0 收藏0