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

添加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 »</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 »</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 »</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 »</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>