模拟toast居中弹出框
来源:互联网 发布:手机小说网站源码 编辑:程序博客网 时间:2024/05/22 00:58
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="apple-touch-fullscreen" content="YES" /><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="format-detection" content="telephone=no" /><meta name="author" content="webkfa.com"/> <title>html5+css3实现手机toast提示-webkfa.com</title><style>*{margin:0;padding:0;-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */-webkit-tap-highlight-color: rgba(210,210,210,0.35); /* make transparent link selection, adjust last value opacity 0 to 1.0 */-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */}body{font-family:"微软雅黑";font-size:12px;}ul,li{list-style:none;}.toasttj2{z-index:1003;font-size: 1.37em;position: fixed;bottom:25%;width: 100%;opacity:0;height: 24px;display: none;transition: opacity 1s ease-out;}.huati_btn{width:175px;height:32px;background:#34a0f0;border-radius:30px;font:14px/32px "微软雅黑";display:block;overflow:hidden;margin:0 auto;text-align:center;color:#fff;text-decoration:none;}.huati{height:40px;padding-top:9px;border-bottom:1px dashed #cecece}</style></head><body><p class="huati"><a href="javascript:test(1);" class="huati_btn">测试一下</a></p><p class="huati"><a href="javascript:test(2);" class="huati_btn">测试二下</a></p><div id="toastId2" class="toasttj2" style="display: none; opacity: 0;"></div><script type="text/javascript">function $S(s){return document.getElementById(s);}function $html(s,html){$S(s).innerHTML=html;}var toastTime2=null;var displayTime2=null;function setToast3(html){if(toastTime2!=null){clearTimeout(toastTime2);clearTimeout(displayTime2);}$S('toastId2').style.display='block';$S('toastId2').style.opacity=1;$html('toastId2',html);center('toastId2');toastTime2=setTimeout(function(){$S('toastId2').style.opacity=0;displayTime2=setTimeout(function(){$S('toastId2').style.display='none';},5000);},5000);}function test(f){if(1==f){setToast3('<div style="color:#fff;background: #919191;border-radius: 30px;padding: 2px;text-align: center;width:475px;margin: 0 auto;height:50px;line-height:50px">话题征集内容不能为空</div>');}else if(2==f){setToast3('<div style="color:#fff;background: #c1c1c1;border-radius: 30px;padding: 2px;text-align: center;width:435px;margin: 0 auto;">话题征集内容最多输入200个字</div>');}}function center(obj){ var div1=document.getElementById(obj); div1.style.top=(document.documentElement.clientHeight-div1.offsetHeight)/2+"px"; div1.style.left=(document.documentElement.clientWidth-div1.offsetWidth)/2+"px";}</script></body></html>
0 0
- 模拟toast居中弹出框
- Toast弹出框
- 弹出框动态居中
- 自定义居中弹出框
- model弹出框居中
- bootstrap弹出框居中
- 弹出框上下居中
- Android:Toast 弹出信息框
- jquery 弹出框居中显示
- 自适应弹出框-垂直居中
- 弹出框完美居中,遮罩
- dwz 弹出框 上下居中
- Android 开发之 Toast (弹出提示框)
- 居中显示的Toast
- div模拟弹出框
- jquery创建水平居中垂直居中弹出框
- 使用jQuery弹出层,信息框居中
- jquery的弹出提示框位置居中
- 第四期 Android Studio 开发环境搭建 《手机就是开发板》
- 基于visual c++之windows核心编程代码分析(22)Mapping File编程
- typedef 和 函数指针 的使用
- vim命令
- CSS基本思想-浮动模型
- 模拟toast居中弹出框
- spark运行模式
- 自定义QGraphicsItem选中样式
- 腾讯云COS(云对象存储服务)的使用
- 利用iframe引用网页后,父页面子页面之间的相互调用
- 基于visual c++之windows核心编程代码分析(23)遍历驱动器并获取驱动器属性
- 开源客户端框架:JavaScript
- 2016广东工业大学新生杯决赛:Problem A: pigofzhou的巧克力棒
- Open Inventor学习资源