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


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 相关文章推荐
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
jQuery插件开发汇总
May 15 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 Javascript
详解JS数组方法
Nov 20 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
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
构建高效的python requests长连接池详解
2020/05/02 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
2013年保送生自荐信格式
2013/11/20 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
护士个人自我鉴定
2014/03/24 职场文书
大学生党员自我评价
2015/03/04 职场文书
关于召开会议的通知
2015/04/15 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫