MVC +Jqyery+Ajax 实现弹出层提醒
阅读原文时间:2023年07月08日阅读:3

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>

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);
}_

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章