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


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验证表单大全
Nov 25 Javascript
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
微信小程序基础教程之echart的使用
Jun 01 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
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
PHP n个不重复的随机数生成代码
2009/06/23 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
解放web程序员的输入验证
2006/10/06 Javascript
JavaScript中的对象化编程
2008/01/16 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
python关闭占用端口方式
2019/12/17 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
竞职演讲稿范文
2014/01/11 职场文书
请假条怎么写
2014/04/10 职场文书
买房协议书
2014/04/11 职场文书
优秀护士先进事迹
2014/05/08 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
如何做好工作总结!
2019/04/10 职场文书
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
Go语言基础知识点介绍
2021/07/04 Golang
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis