MVC +Jqyery+Ajax 实现弹出层提醒

CSS部分:

/*登录提示*/

* {margin: 0; padding: 0; }

.layer {
   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;
   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);
}

   

原文地址:https://www.cnblogs.com/hugeboke/p/9982828.html