我们在浏览网页时常常会遇到登录时候,网站并没有跳转到登录页面而是弹出一个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>
- <span style="font-size:18px;"><input type="submit" value="登录" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;"
- data-toggle="modal" data-target="#mymodal">
- </span>
- <span style="font-size:18px;">
- <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"
- onblur="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" onblur="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></span>
上面的jsp用于定义一个模态框:在这里有详细讲解:
http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
在modal-body也就是模态框主体中放置一个表单用于登录
下面使用jquery来进行表单简单验证:
- <span style="font-size:18px;"> <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></span>