你的位置:首页 > Java教程

[Java教程]模态登录


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(=layer.load(1);    },    complete:function("#modal_login_btn").removeAttr("disabled");    },    error:function(=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>