模态登录

简介: 1 页面 × XXX系统用户登录 ...

1 页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  <!-- bootstrap模态输入框  开始-->
  <a href="#" id="modalLoginBtn" data-toggle="modal" data-target="#myModal"></a>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog1" role="document">
      <div class="modal-content">
        <div class="modal-header">
        <button id="closeModalBtn" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">XXX系统用户登录</h4>
        </div>
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row-fluid">
              <div class="col-xs-12">
                <form class="form-horizontal" id="login_modal_form">
                  <div class="form-group">
                    <div class="col-xs-12  ">
                      <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                        <input type="text" class="form-control" id="companyAccount" name="companyAccount" placeholder="user name">
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-xs-12  ">
                      <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                        <input type="password" class="form-control" id="password" name="password" placeholder="password">
                           <input type="hidden" id="key">
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-xs-6">
                      <p class="text-center remove-margin">
                        <!--<label>
                          <input type="checkbox">
                          <small>记住密码</small> </label>-->
                        </p>
                    </div>
                    <div class="col-xs-6">
                      <!-- <p class="text-center remove-margin"><small>还没注册?</small> <a href="javascript:void(0)" ><small>注册体验</small></a> </p> -->
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-xs-12  ">
                      <button id="modal_login_btn" type="button" class="btn btn-primary btn-lg btn-block">登录</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<!-- sha1加密js -->
<script src="${pageContext.request.contextPath}/include/js/mod_security/hmac-sha1.js"></script>
<!-- 模态登录框js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/include/js/mod_security/login_modal.js"></script>
<!-- bootstrap模态输入框  结束-->

2 触发模态框

<script type="text/javascript">
    //$('#myModal').modal({backdrop: 'static', keyboard: false});//激活模态登录窗口
</script>

3 关闭模态框

$("#closeModalBtn").trigger("click");

4 登录js

$("#companyAccount").focus();

$("#modal_login_btn").on("click", function () {
     var urlStr = projectName + "/Login/login";
    var companyAccount = $("#companyAccount").val();
   var password = $("#password").val();
  
   var sha1string= CryptoJS.HmacSHA1(companyAccount, password);
   $("#key").val(sha1string);
   
   /** 阻止用户重复提交 **/
   $(this).attr("disabled", "disabled");
   
   $.ajax({
       url:urlStr,
       data:{
           companyAccount: companyAccount,
        password: $("#key").val() 
       },
       success : function(arr) {
           if(arr.success==true){a
                layer.close(load_index);
                layer.alert("登录成功");   
                $("#closeModalBtn").trigger("click");
           }else if(arr.success==false){
               layer.close(load_index);
               load_index=layer.alert(arr.message,{icon: 7});
               $("#companyAccount").focus();
           }
            $("#modal_login_btn").removeAttr("disabled");
       }, 
       beforeSend:function(XMLHttpRequest){
           load_index=layer.load(1);
       },
       complete:function(XMLHttpRequest,textStatus){   
             $("#modal_login_btn").removeAttr("disabled");
       },
       error:function(XMLHttpRequest){ 
            layer.close(load_index);
            load_index=layer.alert(busy_network,5);
        }
   });
    
});


  
//回车提交
document.onkeydown = function (e) {// 捕捉回车
   /** 获取event对象 **/
   e = e || window.event;
   /** 获取事件源 **/
   var obj = e.target || e.srcElement;
   /** 获取事件源类型 **/
   var ch = e.which || e.keyCode;

   if (ch == 13) {
       /** 触发匹配到的元素的Click事件 **/
       $("#modal_login_btn").trigger("click");
   }
}

5 依赖sha1加密js

<!-- sha1加密js -->
<script src="${pageContext.request.contextPath}/include/js/mod_security/hmac-sha1.js"></script>
开始做,坚持做,重复做
相关文章
|
3天前
|
图形学 计算机视觉
CVPR 2024:仅需文本或图像提示,新框架CustomNeRF精准编辑3D场景
【4月更文挑战第22天】CustomNeRF是CVPR 2024会议上的一项创新框架,它利用文本描述或参考图像实现3D场景的精准编辑。通过局部-全局迭代编辑(LGIE)训练和类别先验正则化,该框架能精确编辑前景区域同时保持背景一致性。尽管依赖预训练模型且局限于文本和图像输入,CustomNeRF在实验中展现了高效编辑能力,为3D场景编辑开辟新路径。[链接](https://arxiv.org/abs/2312.01663)
12 2
|
2月前
|
机器学习/深度学习 人工智能 安全
千帆大模型平台再升级:接入大模型最多、Prompt模板最全面
千帆大模型平台再升级:接入大模型最多、Prompt模板最全面
87 1
|
机器学习/深度学习 自然语言处理 算法
跨模态学习能力再升级,EasyNLP电商文图检索效果刷新SOTA
本⽂简要介绍我们在电商下对CLIP模型的优化,以及上述模型在公开数据集上的评测结果。最后,我们介绍如何在EasyNLP框架中调用上述电商CLIP模型。
|
29天前
|
SQL 自然语言处理 NoSQL
ChatTuGraph:通过大模型“与图对话”
相比于SQL相对成熟的语法标准,图查询语言尚未形成成熟的统一标准,目前是多种查询语法并存的状态,上手门槛高,因此更需要借助大语言模型的自然语言理解能力,降低图数据库查询语言的使用门槛。
ChatTuGraph:通过大模型“与图对话”
|
3月前
|
机器学习/深度学习 人工智能 自然语言处理
人工智能语音数据标注信息
人工智能语音数据标注信息
59 1
|
5月前
|
机器学习/深度学习 存储 自然语言处理
XoT:一种新的大语言模型的提示技术
这是微软在11月最新发布的一篇论文,题为“Everything of Thoughts: Defying the Law of Penrose Triangle for Thought Generation”,介绍了一种名为XOT的提示技术,它增强了像GPT-3和GPT-4这样的大型语言模型(llm)解决复杂问题的潜力。
171 6
|
11月前
|
计算机视觉
CVPR 2023 | 多个扩散模型相互合作,新方法实现多模态人脸生成与编辑
CVPR 2023 | 多个扩散模型相互合作,新方法实现多模态人脸生成与编辑
224 0
|
11月前
|
机器学习/深度学习 编解码 人工智能
无需新型token mixer就能SOTA:MetaFormer视觉基线模型开源,刷新ImageNet记录
无需新型token mixer就能SOTA:MetaFormer视觉基线模型开源,刷新ImageNet记录
161 0
|
人工智能 自然语言处理 监控
针对对话式交互的访问控制模型探讨
现如今,越来越多的用户界面可以让人和计算机之间进行自然而流畅的交流。这些界面通常被称为对话式用户界面(CUI),它们本身正在变得越来越复杂,其中包括一些支持自然语言处理(NLP)功能的人工智能软件组件。 CUI(对话用户界面)被越来越多地应用于不同的领域,例如电子商务、客户服务、电子健康或内部企业流程支持等等。在这些应用场景中,很容易出现用户和系统的安全风险。例如,在需要保护用户和系统安全的情况下,需要增加安全措施。
140 0
|
机器学习/深度学习 数据采集 Java
我深度学习0基础,还训练出一个识别验证码模型!
我深度学习0基础,还训练出一个识别验证码模型!
472 0
我深度学习0基础,还训练出一个识别验证码模型!