使用模态框进行登录

我们在浏览网页时常常会遇到登录时候,网站并没有跳转到登录页面而是弹出一个alert来用于登录。其实这个弹出窗口就是一个modal(模态框)(是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭)。在这里我简单介绍以下模态框使用以及登录的一些效果(提示:由于实现这种功能的方法很多,这里简单介绍用于使初学者有个基本了解,大神请绕过
首先最简单的方法就是使用框架(前端矿建框架有很多)
在这里我使用bootstarp框架,因为这个框架最流行也比较简单上手:
首先需要引入两个框架:



以下是使用bootstarp实现模态框


 
  
上面的jsp用于定义一个模态框:在这里有详细讲解: http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
在modal-body也就是模态框主体中放置一个表单用于登录
下面使用jquery来进行表单简单验证:
 


你可能感兴趣的:(使用模态框进行登录)