.net MVC框架下利用css+js实现遮罩效果

前一篇文章中http://blog.csdn.net/luanzheng_365/article/details/70455933,实现的loading效果的显示上进行优化,形成一个遮罩,将loading显示在遮罩上,并调整遮罩属性,使得遮罩与页面滚动可以适配.

运行结果页面如下:

代码修改如下:
1. CSS,将loadingEffect的position设置为absolute, z-index=1001. 并添加mask标签,mask用来实现遮罩.

.loadEffect {
    /*width: 100px;
    height: 100px;*/
    position: absolute;
    margin: 0 auto;
    margin-top: 100px;
    z-index: 1001;
    display: none;
}

    .loadEffect span {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: lightgreen;
        position: absolute;
        -webkit-animation: load 1.04s ease infinite;
    }

@-webkit-keyframes load {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
}

.loadEffect span:nth-child(1) {
    left: 22px;
    top: 0px;
    margin-top: -8px;
    -webkit-animation-delay: 0.13s;
}

.loadEffect span:nth-child(2) {
    left: 14px;
    top: 14px;
    -webkit-animation-delay: 0.26s;
}

.loadEffect span:nth-child(3) {
    left: 0px;
    top: 22px;
    margin-left: -8px;
    -webkit-animation-delay: 0.39s;
}

.loadEffect span:nth-child(4) {
    top: 14px;
    right: 14px;
    -webkit-animation-delay: 0.52s;
}

.loadEffect span:nth-child(5) {
    right: 22px;
    top: 0px;
    margin-top: -8px;
    -webkit-animation-delay: 0.65s;
}

.loadEffect span:nth-child(6) {
    right: 14px;
    bottom: 14px;
    -webkit-animation-delay: 0.78s;
}

.loadEffect span:nth-child(7) {
    bottom: 22px;
    left: 0px;
    margin-left: -8px;
    -webkit-animation-delay: 0.91s;
}

.loadEffect span:nth-child(8) {
    bottom: 14px;
    left: 14px;
    -webkit-animation-delay: 1.04s;
}

.mask {
    width:100%;
    height:100%;
    background-color:#808080;
    position:absolute;
    top:0;
    left:0;
    z-index:1000;
    opacity:0.3;
    /*兼容IE8及以下版本浏览器*/
    filter: alpha(opacity=30);
    display:none;
} 

1. 添加mask.js文件. 增加如下两个方法,显示遮罩和隐藏遮罩. 之后在上一篇文章中的js方法getUserInfo()中,在拿到数据之后,调用hideMask.

function showMask() {
    var i = document.getElementById("maskeffect");
    i.style.display = "block";
    i.style.position = "fixed";
}

function hideMask() {
    var i = document.getElementById("maskeffect");
    i.style.display = "none";
}

3.html 在HTML中,调用获取数据之前,先调用显示遮罩层showMask().

@{
    ViewBag.Title = "Home Page";
}



<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

<input id="ID" type="text" size="15" />
<input id="NAME" type="text" size="15" />
<input id="MOBILE" type="text" size="15" />




<link rel="stylesheet" type="text/css" href="~/Content/css/loading.css">
<div class="loadEffect" id="loading">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>


<script type="text/javascript" src="~/Content/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="~/Content/js/getUserInfo.js"></script>
<script type="text/javascript" src="~/Content/js/mask.js"></script>

<div class="mask" id="maskeffect">
</div>

<script>
    showMask();
    getUserInfo();
</script>