zoukankan      html  css  js  c++  java
  • 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);
    }

       

  • 相关阅读:
    001-docker-net-网络设置分类、Bridge详解、mac docker说明
    010-Linux 磁盘信息查看
    011-Spring aop 002-核心说明-切点PointCut、通知Advice、切面Advisor
    【高并发】Akka 模型
    【大数据】Spark On Yarn
    【Git】git pull和git pull --rebase的使用
    【Zookeeper】连接ZooKeeper的方式
    【Cloud】IaaS、PaaS和SaaS
    【Linux】解决"no member named 'max_align_t'
    【神经网络】Dependency Parsing的两种解决方案
  • 原文地址:https://www.cnblogs.com/hugeboke/p/9982828.html
Copyright © 2011-2022 走看看