使用模态框进行登录

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

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

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

首先需要引入两个框架：

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

以下是使用bootstarp实现模态框

<input type="submit" value="登录" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;"
data-toggle="modal" data-target="#mymodal">

<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false"
>
  <div class="modal-dialog" style="width:550px;" > 
   <div class="modal-content">
  <!--  模态框的头 -->
            <div class="modal-header" style="background-color:#C1FFC1;">
             <button class="close" data-dismiss="modal" aria-hidden="true">×</button>
             <h2 class="modal-title" id="myModalLabel" align="center">登录</h2>        
  </div>
            <div class="modal-body" style="background-color:#C1FFC1;">
            
          <!--   以下是登录的form表单 -->
            <form class="form-horizontal" role="form" name="f" action="login" method="POST">
  <div class="form-group" id="div1">
    <label for="firstname" class="col-sm-2 control-label">用户名：</label>
    <div class="col-sm-10" id="user">
      <input type="text" class="form-control" id="name" placeholder="请输入名字" style="width: 300" name="username"
      class="tooltip-test"
      data-toggle="tooltip" data-placement="bottom"
        title="请输入6——8位的字母或数字任意组合"
        data-trigger="focus"
     οnblur="a()"
      >
      <label id="n" style="color: red;"></label>
    </div>
  </div>
  <div class="form-group " id="div2">
    <label for="lastname" class="col-sm-2 control-label">密   码：</label>
    <div class="col-sm-10" id="pd">
      <input type="password" class="form-control" id="pwd"  οnblur="a()"  placeholder="请输入密码" style="width: 300" name="password"
        class="tooltip-test"
      data-toggle="tooltip" data-placement="bottom"
        title="请输入6位密码"
        data-trigger="focus" 
      >
       <label id="p" style="color: red;"></label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox">请记住我
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary" style="text-shadow: black 5px 3px 3px;" disabled="disabled" id="denglu">登录</button>
    </div>
  </div>
</form>
            
            
            </div>
              <div class="modal-footer" style="background-color:#C1FFC1;">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
  
  </div>
  </div>
</div>


 
 

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

 
 

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

 
 

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

 
 

  
  
 <script>
/*  页面加载完执行此函数 */
$(function () { 
	/* 用于拖动div标签 */
	 $( "#mymodal" ).draggable();
	/*  激活提示框 */
	 $('#identifier').tooltip(options)
	 
	
});
 function a(){
	 var username=$('#name').val();
	 var pwd=$('#pwd').val();
	  /* 判断用户名是否为空 */
	 if(username==""){
	/* 使用jquery的animate实现窗口抖动 */
	for(var i=0;i<3;i++){
	$('#user').animate({left:"2px"},80);
	$('#user').animate({left:""},80);
}
	  $("#div1").addClass("has-error");
	 $('#n').html("用户名不能为空");
	 $('#denglu').attr("disabled","disabled");
	 }
	 else{
	 /* 使用jquery的addClass来动态添加标签的class属性 */
	  $("#div1").removeClass("has-error");
	  $("#div1").addClass("has-success");
	  $('#n').html(" ");
	/*   判断密码是否为空 */
	 if(pwd==""){
	 	for(var i=0;i<3;i++){
	    $('#pd').animate({left:"2px"},100);
	   $('#pd').animate({left:""},100);
}
	   $("#div2").addClass("has-error");
      $('#p').html("密码不能为空");
	 $('#denglu').attr("disabled","disabled");
	 }
	 else{
	   $("#div2").removeClass("has-error");
	   $("#div2").addClass("has-success");
	    $('#p').html(" ");
	   $('#denglu').attr("disabled",false);
	 }
	 }
	 }
</script>