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

最新推荐文章于 2025-06-25 09:09:55 发布

fengsigaoju

最新推荐文章于 2025-06-25 09:09:55 发布

阅读量7.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/fengsigaoju/article/details/52812132

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在用户登录失败时，利用jQuery和Bootstrap的模态框显示错误信息，并防止用户通过点击背景或按ESC键关闭，同时确保登录页面能够正确回退。该实现主要在Servlet中进行处理。

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