NProgress.js增加模态层的示例-百分百源码网

NProgress.js增加模态层的示例

发布时间：01/15 来源：浏览：关键词：

NProgress通常用于长网页了进度条了，它是由Google, YouTube, 和 Medium 提供灵感了，下面我们来看一篇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;}

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

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

打赏