最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
NProgress.js增加模态层的示例
时间:2016-08-01 编辑:简简单单 来源:一聚教程网
NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube。我是在用github时发现这一特性的,就想应用到我的网站上,经过层层筛选找到了NProgress,感觉非常棒,另外我又为NProgress添加了模态层,因为我不希望一个请求响应未结束前,当前页面再去请求服务。
一、组件下载
官网http://ricostacruz.com/nprogress/
也可以看到演示效果,我就不再贴我网站的效果图了,就是多了一层模态。
二、应用
1、导入组件
代码如下 | 复制代码 |
2、使用组件
代码如下 | 复制代码 |
// 配置 // 将模态层添加到body中 ajaxbg.hide(); // 页面绑定ajaxStart、ajaxStop方法 // 如果存在模态框ajax,则将背景层添加到当前模态框上 |
1.我的项目中有模态框,所以弹出模态框的上面应用模态层的话,就将模态层置于弹出模态框的上面,而不再是body上。
2.ajaxStart、ajaxStop 两个方法就可以实现请求的进度条的开始和结束。
模态层的样式
代码如下 | 复制代码 |
.background { display:block; width:100%; height:100%; opacity:0.4; filter:alpha(opacity=40); background:#FFF; position:absolute; top:0; left:0; z-index:2000;} |
--------------------------------------------------------------------------------
使用起来非常简单,最关键的在于找到合理的方案,而这篇博文就可以为你提供解决方案
-
上一个: Ajax与DOM实现动态加载的例子
-
下一个: JS 解析url中的中文参数方法
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28