MVC +Jqyery+Ajax 实现弹出层提醒
CSS部分:
/*登录提示*/ * {margin: 0; padding: 0; } .layer {
width: 350px;
padding: 20px;
background: #fff;
border: 1px solid #bbb;
border-radius: 10px;
box-shadow: 0 3px 5px #bbb; /*阴影*/
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
}
.layer h2 {
text-align:center;
font-size: 18px;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
margin-bottom: 20px;
}
.layer p {
font-size: 14px;
text-indent: 2em;
line-height: 1.5;
}
.layer button {
display: block;
width: 100px;
height: 30px;
line-height: 30px;
margin: 30px auto 0;
text-align: center;
background-color: #333;
color: #fff;
border: 0;
border-radius: 5px;
cursor: pointer;
}
界面部分【视图】
<!--到期提醒界面:--> <div class="layer" id="pratorm" style="display:none;z-index:20"> <h2 style="text-align:center;font-size: 20px;">温馨提醒</h2> <p> <text id="massage"></text> </p> <button id="close" onclick="closed();">知道了</button> </div>
Ajax部分
@*到期提醒功能的实现*@ <script text="javaScript">//登录单击事件【调用onclick事件】 function welcome() { var code = $('#Code').val();//获取输入的信息
$.ajax({ type: "post",//提交类型[get/post] url: "/Authorize/GetAuthorizationTime",[控制器/视图] data: { code: code },//参数,当有多个参数时,“,”隔开,例如: data: { code1: code1,code2: code2},、
dataType: "json", //返回的参数类型
success: function (data) { //data表示返回的数据集
//弹窗
if (data.IsSuccess)
{
var Message = data.Message;//获取的值
document.querySelector(".layer").style.display = "block";
$('#massage').text(Message);//给HTML标签赋值
}
//不弹窗
else
{
document.getElementById("loginForm").submit();//提交
}
}
}
);
}
//回车实现同等效果 $(document).keydown(function (event) { if (event.keyCode == 13) { $("#login").click(); } }); //点击我知道了,提交 function closed() { document.getElementById("loginForm").submit();//js原生方式表单提交 } </script>
Controller:
[HttpPost] [AllowAnonymous] public string GetAuthorizationTime(string code) { var result = new RequestResult(); var companyDTO = _companyService.FindByCode(code); //验证倒计时时间是否大于0分钟 if (companyDTO == null && !companyDTO.ConsultEndTime.HasValue) { result.IsSuccess = true; result.Message = "当前用户不存在,请重新输入!"; return JsonConvert.SerializeObject(result); } TimeSpan ts = companyDTO.ConsultEndTime.Value - DateTime.Now; if (ts.Days < due && ts.Hours > 0) { result.IsSuccess = true; result.Message = "距离系统使用结束时间还剩 " + ts.Days + " 天 " + ts.Hours.ToString() + " 小时! 为了不影响系统的正常使用,请尽快联系我们的业务人员,或致电:18069879843、057-181389051"; } else if (ts.Hours <= 0 && ts.Minutes > 0) { result.IsSuccess = true; result.Message = "距离系统使用结束时间不到1小时! 为了不影响系统的正常使用,请尽快联系我们的业务人员,或致电:18069879843、057-181389051"; } else if (ts.Milliseconds < 0 && ts.Minutes < 0 && ts.Hours < 0) { result.IsSuccess = true; result.Message = "系统不在授权期内,如要继续使用,请尽快联系我们的业务人员,或致电:18069879843、057-181389051"; } return JsonConvert.SerializeObject(result); }