摘要:重写方法展示效果如图很简单重写,两个做成伪提示框,同时加遮罩制止用户操作。
重写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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/91985.html
摘要:重写方法展示效果如图很简单重写,两个做成伪提示框,同时加遮罩制止用户操作。 重写alert() 方法 展示效果如图 showImg(https://segmentfault.com/img/bVXBv8?w=406&h=202); 很简单 重写alert,两个div 做成伪提示框,同时加遮罩制止用户操作。 值得一提的是之前用的是 window.alert = function(...
摘要:重写方法展示效果如图很简单重写,两个做成伪提示框,同时加遮罩制止用户操作。 重写alert() 方法 展示效果如图 showImg(https://segmentfault.com/img/bVXBv8?w=406&h=202); 很简单 重写alert,两个div 做成伪提示框,同时加遮罩制止用户操作。 值得一提的是之前用的是 window.alert = function(...
摘要:打个招聘广告杭州阿里巴巴招前端想去西溪的也可帮推荐,比较缺人,机会多多广告位长期有效,有兴趣简历我邮箱个人在移动端的一些总结归纳,有新的知识点会一直更新一部分用做动画时,变形尽量通过来实现,而不是用,等属性。不过的事件有一个事件穿透的问题。 打个招聘广告: 杭州 阿里巴巴B2B 招前端(想去西溪的也可帮推荐),比较缺人,机会多多!广告位长期有效,有兴趣简历我邮箱:854936875@q...
摘要:打个招聘广告杭州阿里巴巴招前端想去西溪的也可帮推荐,比较缺人,机会多多广告位长期有效,有兴趣简历我邮箱个人在移动端的一些总结归纳,有新的知识点会一直更新一部分用做动画时,变形尽量通过来实现,而不是用,等属性。不过的事件有一个事件穿透的问题。 打个招聘广告: 杭州 阿里巴巴B2B 招前端(想去西溪的也可帮推荐),比较缺人,机会多多!广告位长期有效,有兴趣简历我邮箱:854936875@q...
摘要:不允许负值用百分比来定义缩放比例。解决这个很简单,在父元素中使用即可解决该。列宽度由单元格内容设定。定义仅有大写字母。不过,要让任何元素生效还得借助于一点点。 css/css3常用样式 CSS修改选中文字的颜色 html代码: 第一段文字选中效果 第二段文字选中效果 css代码: .p1::selection{background:red;color:#fff;} .p2::selec...
阅读 1399·2021-09-02 09:53
阅读 2667·2021-07-29 13:50
阅读 1715·2019-08-30 11:07
阅读 1571·2019-08-30 11:00
阅读 1450·2019-08-29 14:00
阅读 1844·2019-08-29 12:52
阅读 2560·2019-08-29 11:11
阅读 3415·2019-08-26 12:23