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

时间：2022-12-10 21:44:01

首先主页面就是登陆页面也就是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方式...
标签：

相关文章