运用jquery和bootstrap实现登陆失败后弹窗并跳转回登陆页面

来源：互联网发布：淘宝怎么看店铺地址编辑：程序博客网时间：2024/06/06 05:11

首先主页面就是登陆页面也就是login.jsp

当用户提交登陆信息后提交到servlet与javabeans中的数据库操作进行检验，这部分操作就不谈了，如果匹配跳转到登陆成功后的页面，否则弹窗并跳转回到登陆页面，因为此时是在servlet中。

具体方法如下:

servlet 的<body>和</body>中：

<script>    $(function(){        $('#myModal').modal({        show:true,        backdrop:'static',        keyboard:false        })    });</script>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="send()">&times;</button><h4 class="modal-title" id="myModalLabel">登陆失败</h4></div><div class="modal-body">用户名和密码不匹配</div><div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal" onclick="send()">关闭</button></div></div><!-- /.modal-content --></div><!-- /.modal --></div>

send.js

  function send()     {     location.href = "login.jsp";      }

这样相当于首先自动调用模态框的代码，然后触发模态框取消的onclick事件实现跳转

需要注意的是

1，在调用模态框中的代码中

backdrop:static时,空白处不关闭.

keyboard:false时,esc键盘不关闭.

2，另外注意模态框是有两种关闭方式...两种都要写上onclick方式...

0 0