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


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 相关文章推荐
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
javascript去除空格方法小结
May 21 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
js 调用百度分享功能
Feb 27 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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的面向对象编程
2006/10/09 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
Python中实现的RC4算法
2015/02/14 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Python 串口读写的实现方法
2019/06/12 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
少先队入队活动方案
2014/02/08 职场文书
机电一体化求职信
2014/03/10 职场文书
保护环境倡议书500字
2014/05/19 职场文书
班级读书活动总结
2014/06/30 职场文书
法人委托书范本格式
2014/09/15 职场文书
黄河绝恋观后感
2015/06/08 职场文书