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


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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 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中simplexml_load_string函数使用说明
2011/01/01 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
无阻塞加载脚本分析[全]
2011/01/20 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
vue观察模式浅析
2018/09/25 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
测试工程师职业规划书
2014/02/06 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
社区创先争优承诺书
2014/08/30 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
安全隐患整改报告
2014/11/06 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
支教个人总结
2015/03/04 职场文书