模态登录

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>