使用模态框进行登录

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

首先最简单的方法就是使用框架（前端矿建框架有很多）

在这里我使用bootstarp框架，因为这个框架最流行也比较简单上手：

首先需要引入两个框架：

[html] view plain copy

1. <link rel="stylesheet" href="js/bootstrap.min.css">  
2. <script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>  
3. <script type="text/javascript" src="js/bootstrap.min.js"></script>  

以下是使用bootstarp实现模态框

[html] view plain copy

1. <span style="font-size:18px;"><input type="submit" value="登录" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;"  
2. data-toggle="modal" data-target="#mymodal">  
3. </span>  

[html] view plain copy

1. <span style="font-size:18px;">  
2. <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false"  
3. >  
4.   <div class="modal-dialog" style="width:550px;" >   
5.    <div class="modal-content">  
6.   <!--  模态框的头 -->  
7.             <div class="modal-header" style="background-color:#C1FFC1;">  
8.              <button class="close" data-dismiss="modal" aria-hidden="true">×</button>  
9.              <h2 class="modal-title" id="myModalLabel" align="center">登录</h2>          
10.   </div>  
11.             <div class="modal-body" style="background-color:#C1FFC1;">  
12.               
13.           <!--   以下是登录的form表单 -->  
14.             <form class="form-horizontal" role="form" name="f" action="login" method="POST">  
15.   <div class="form-group" id="div1">  
16.     <label for="firstname" class="col-sm-2 control-label">用户名：</label>  
17.     <div class="col-sm-10" id="user">  
18.       <input type="text" class="form-control" id="name" placeholder="请输入名字" style="width: 300" name="username"  
19.       class="tooltip-test"  
20.       data-toggle="tooltip" data-placement="bottom"  
21.         title="请输入6——8位的字母或数字任意组合"  
22.         data-trigger="focus"  
23.      onblur="a()"  
24.       >  
25.       <label id="n" style="color: red;"></label>  
26.     </div>  
27.   </div>  
28.   <div class="form-group " id="div2">  
29.     <label for="lastname" class="col-sm-2 control-label">密   码：</label>  
30.     <div class="col-sm-10" id="pd">  
31.       <input type="password" class="form-control" id="pwd"  onblur="a()"  placeholder="请输入密码" style="width: 300" name="password"  
32.         class="tooltip-test"  
33.       data-toggle="tooltip" data-placement="bottom"  
34.         title="请输入6位密码"  
35.         data-trigger="focus"   
36.       >  
37.        <label id="p" style="color: red;"></label>  
38.     </div>  
39.   </div>  
40.   <div class="form-group">  
41.     <div class="col-sm-offset-2 col-sm-10">  
42.       <div class="checkbox">  
43.         <label>  
44.           <input type="checkbox">请记住我  
45.         </label>  
46.       </div>  
47.     </div>  
48.   </div>  
49.   <div class="form-group">  
50.     <div class="col-sm-offset-2 col-sm-10">  
51.       <button type="submit" class="btn btn-primary" style="text-shadow: black 5px 3px 3px;" disabled="disabled" id="denglu">登录</button>  
52.     </div>  
53.   </div>  
54. </form>  
55.               
56.               
57.             </div>  
58.               <div class="modal-footer" style="background-color:#C1FFC1;">  
59.                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  
60.                 <button type="button" class="btn btn-primary">提交更改</button>  
61.             </div>  
62.     
63.   </div>  
64.   </div>  
65. </div></span>  

上面的jsp用于定义一个模态框：在这里有详细讲解：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

在modal-body也就是模态框主体中放置一个表单用于登录

下面使用jquery来进行表单简单验证：

[html] view plain copy

1. <span style="font-size:18px;"> <script>  
2. /*  页面加载完执行此函数 */  
3. $(function () {   
4.     /* 用于拖动div标签 */  
5.      $( "#mymodal" ).draggable();  
6.     /*  激活提示框 */  
7.      $('#identifier').tooltip(options)  
8.        
9.       
10. });  
11.  function a(){  
12.      var username=$('#name').val();  
13.      var pwd=$('#pwd').val();  
14.       /* 判断用户名是否为空 */  
15.      if(username==""){  
16.     /* 使用jquery的animate实现窗口抖动 */  
17.     for(var i=0;i<3;i++){  
18.     $('#user').animate({left:"2px"},80);  
19.     $('#user').animate({left:""},80);  
20. }  
21.       $("#div1").addClass("has-error");  
22.      $('#n').html("用户名不能为空");  
23.      $('#denglu').attr("disabled","disabled");  
24.      }  
25.      else{  
26.      /* 使用jquery的addClass来动态添加标签的class属性 */  
27.       $("#div1").removeClass("has-error");  
28.       $("#div1").addClass("has-success");  
29.       $('#n').html(" ");  
30.     /*   判断密码是否为空 */  
31.      if(pwd==""){  
32.         for(var i=0;i<3;i++){  
33.         $('#pd').animate({left:"2px"},100);  
34.        $('#pd').animate({left:""},100);  
35. }  
36.        $("#div2").addClass("has-error");  
37.       $('#p').html("密码不能为空");  
38.      $('#denglu').attr("disabled","disabled");  
39.      }  
40.      else{  
41.        $("#div2").removeClass("has-error");  
42.        $("#div2").addClass("has-success");  
43.         $('#p').html(" ");  
44.        $('#denglu').attr("disabled",false);  
45.      }  
46.      }  
47.      }  
48. </script></span>