NProgress.js增加模态层的示例

NProgress是一款在网页顶部添加细长进度条的工具，非常轻巧，使用起来也非常便捷，灵感来源于Google, YouTube。我是在用github时发现这一特性的，就想应用到我的网站上，经过层层筛选找到了NProgress，感觉非常棒，另外我又为NProgress添加了模态层，因为我不希望一个请求响应未结束前，当前页面再去请求服务。
一、组件下载

官网http://ricostacruz.com/nprogress/

也可以看到演示效果，我就不再贴我网站的效果图了，就是多了一层模态。

二、应用

1、导入组件

 代码如下 复制代码
<link type="text/css" rel="stylesheet" href="${ctx}/components/nprogress/nprogress.css" />
<script type="text/javascript" src="${ctx}/components/nprogress/nprogress.js"></script>

2、使用组件

 代码如下 复制代码

// 配置
NProgress.configure({
    // 不显示转动的小圆圈
    showSpinner : false
});

// 将模态层添加到body中
var ajaxbg = $('<div id="background" class="background"></div>').appendTo("body");
ajaxbg.hide();

// 页面绑定ajaxStart、ajaxStop方法
$(document).ajaxStart(function() {
    // 启动
    NProgress.start();

    // 如果存在模态框ajax，则将背景层添加到当前模态框上
    if ($("#pop_ajax_dialog").length > 0) {
        $("#pop_ajax_dialog").append(ajaxbg);
    } else {
        $("body").append(ajaxbg);
    }
    // 模态层
    ajaxbg.show();
}).ajaxStop(function() {
    // 结束、隐藏模态层
    NProgress.done();
    ajaxbg.hide();
});

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;}

--------------------------------------------------------------------------------

使用起来非常简单，最关键的在于找到合理的方案，而这篇博文就可以为你提供解决方案

时间： 2025-01-22 17:24:33

NProgress.js增加模态层的示例的相关文章

JS弹出层的显示与隐藏示例代码

 关于JS弹出层的显示与隐藏,在网上可以搜到很多的类似教程,本文实现了一下,喜欢的朋友不要错过 代码如下: <!--弹出层的显示与隐藏-->  <script type="text/javascript">  //弹出层的显示  //overlays:为遮罩层的ID  //wins:弹出层窗体的ID  //弹出层中用于拖动的ID  function popDIV_show(overlays,wins,wins_title) {  var oLays = docu

JS弹出层单纯的绝对定位居中示例代码

 这篇文章主要介绍了JS弹出层的绝对定位居中是如何实现的,需要的朋友可以参考下  代码如下: function doThis()  {  var a = document.getElementById("addYear");  a.style.left=(document.body.clientWidth/2-a.clientWidth/2)+"px";  a.style.top=(document.body.scrollTop+document.body.clie

jquery插件NProgress.js制作网页加载进度条

  这篇文章主要介绍了jquery插件NProgress.js制作网页加载进度条的相关资料,需要的朋友可以参考下 NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Googl

JavaScript实现DIV层拖动及动态增加新层的方法

  本文实例讲述了JavaScript实现DIV层拖动及动态增加新层的方法.分享给大家供大家参考.具体分析如下: 无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠标拖动层可移动位置,将JS部分另存为一个新文件,用到的时候从外部引入,这个拖动层代码很流行,GG和YAHOO等大网站经常可以看到这种效果. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

使用js实现关闭js弹出层的窗口

 本篇文章主要是对使用js实现关闭js弹出层的窗口的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 <script type="text/javascript"> function toggle() {   theObj = document.getElementById('Sunyanzi').style;   if (  theObj.display == "none" ) theObj.display = "block&

jquery插件NProgress.js制作网页加载进度条_jquery

NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Google, YouTube, 和 Medium 提供灵感. 安装 依赖于 jQuery (1.8版本及以上),添加 np

JS弹出层遮罩,隐藏背景页面滚动条细节优化分析_javascript技巧

一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关. body或html去掉滚动条后,页面会有一个滚动条宽度/2的跳动!这个跳动对用户体验来十分不好,因此给body添加一下

JavaScript实现DIV层拖动及动态增加新层的方法_javascript技巧

本文实例讲述了JavaScript实现DIV层拖动及动态增加新层的方法.分享给大家供大家参考.具体分析如下: 无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠标拖动层可移动位置,将JS部分另存为一个新文件,用到的时候从外部引入,这个拖动层代码很流行,GG和YAHOO等大网站经常可以看到这种效果. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=

项目中通过js动态创建层的方法为表单添加错误提示

本文介绍利用动态创建层技术实现无冗余代码为表单自动添加错误提示的方法. 项目中表单输入检测是基本必定会碰到的,本文提供一种方法通过js动态创建层的方法为表单添加错误提示.该代码在IE6和firefox3.5中测试通过. 动态创建层的代码: function createDiv(msg) { //create a new empty p var str = document.createElement("p"); str.id = "newp"; //p ID str