模态登录

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>