我们在浏览网页时常常会遇到登录时候,网站并没有跳转到登录页面而是弹出一个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>
<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>