移动端 一个简单易懂的弹出框


Posted in Javascript onJuly 06, 2016

先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码。

移动端 一个简单易懂的弹出框

关键代码如下所示:

function tishi(content,url) {
var html = '<div class="xiaoxi none" id="msg" style="z-index:9999;left: 5%;width: 90%;position: fixed;background:none;top:50%;"> <p class="msg" style="background: none repeat scroll 0 0 #000; border-radius: 30px;color: #fff; margin: 0 auto;padding: 1.5em;text-align: center;width: 70%;opacity: 0.8;"></p></div>';
$(document.body).append(html); 
$("#msg").show();
$(".msg").html(content);
if(url){
window.setTimeout("location.href='"+url+"'", 1500);
}else{
setTimeout('$("#msg").fadeOut()', 1500);
}
} 
tishi('留言成功');

以上所述是小编给大家介绍的移动端 一个简单易懂的弹出框 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 技巧大全(新手入门篇)
May 12 Javascript
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 #Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 #Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 #Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 #Javascript
js中window.open的参数及注意注意事项
Jul 06 #Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 #Javascript
jQuery 3.0十大新特性
Jul 06 #Javascript
You might like
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
电子商务专业个人的自我评价分享
2013/10/29 职场文书
军训学生自我鉴定
2014/02/12 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
美术专业自荐信
2014/07/07 职场文书
扬州个园导游词
2015/02/06 职场文书
党内外群众意见范文
2015/06/02 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js