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">×</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>