Bootstrap弹出带合法性检查的登录框实例代码【推荐】
最近做了一个项目其中有项目需求涉及到访问控制，在访问需要登录才能使用的页面或功能时，会弹出登录框：
效果如下：
图 1-点击用户名时，如未登录弹出登录框
对这个功能的详细描述：
不涉及到登录时，登录框隐藏
涉及到登录时，登录框弹出到页面左上角
登陆成功后登录框隐藏
实现思路：
在body结束标签之前插入登录的div,设其定位方式为absolute，位置在左上角。
登录框默认的display属性为none。触发登录时，将该属性改为block
附上示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
h3{width:100%;padding-bottom:10px;border-bottom:2px solid #CCC;}
#close{position:absolute;top:2px;right:2px;}
#close span{padding:3px 10px;background-color: #999;font-size:20px;color:white;cursor:pointer;}
#log{display: none; width: 400px; height: 400px; padding: 30px 40px; background-color: #F3F5F6; position: fixed; top: 70px;; right: 30px;}
.error{float:right;color:red;font-size:1.2em;margin-right:10px}
</style>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<button onclick="document.getElementById('log').style.display='block'">弹出登录框</button>
<div id="log">
<form action="../control/logincheck.php" method="post">
<h3 >请登录</h3>
<div class="form-group">
<label for="username">用户名*</label>
<span id="user" class="error"> </span>
<input type="text" class="form-control" name="username"
id="username" placeholder="用户名" onblur='checkName()' required />
</div>
<div class="form-group">
<label for="password">密码*</label>
<span id="psword" class="error"> </span>
<input type="password" class="form-control"
name="password"
id="password" placeholder="密码" onblur='checkPassword()' required />
</div>
<div class="checkbox">
<label>
<span><input type="checkbox" value='true' style="width:15px;height:15px;" > 记住我</span>
</label>
</div>
<input type="submit" class="btn btn-primary login-button" value="登录" style="width:70px;height:40px;" />
<p class="text-success" ><a href="register.html">>>还没账号？去注册</a></p>
</form>
<div id="close" >
<span onclick="document.getElementById('log').style.display='none'">关闭</span>
</div>
</div>
<script>
var checkName=function() {
document.getElementById("user").innerHTML ="";
var name = eval(document.getElementById('username')).value;
if (name.length > 20 || name.length < 1)
document.getElementById("user").innerHTML = "用户名长度在1-20之间！" ;
}
var checkPassword = function(){
document.getElementById("psword").innerHTML ="";
var name = eval(document.getElementById('password')).value;
if (name.length > 12 || name.length < 6)
document.getElementById("psword").innerHTML="密码长度在6-12之间！" ;
}
</script>
</body>
</html>
一种完全用AngularJS实现验证和提示的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<h2>验证实例</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = '输入用户名';
$scope.email = '输入密码';
});
</script>
</body>
</html>
以上所述是小编给大家介绍的Bootstrap弹出带合法性检查的登录框实例代码【推荐】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
jquery ui bootstrap 实现自定义风格
首先看一下自定义提示框的效果图 alert 普通的提示当然可以自定义样式 confrim 确认框 支持callback 复制代码 代码如下: //message 提示的信息 ,callback(true/false)回调函数 window.shconfirm = function (message, callback) 回调函数参数为 true/false prompt 邀请用户输入框 复制代码 代码如下: //message 提示的信息 ,callback(msg)回调函数(用户输入的消息)
-
使用BootStrap实现用户登录界面UI
先给大家展示下效果图,如果大家感觉还不错,请继续参考实现思路详解. 布局 1.左右各一半(col-md-6) 2.左侧登录框占左侧一半的10/12 3.右侧是登录系统的注意事项 使用到的HTML元素 well 输入框组(input-group) 按钮(btn-success) HTML代码 <div class="row" style="margin-top:30px;"> <div class="col-md-6" style
-
基于Bootstrap的UI扩展 StyleBootstrap
StyleBootstrap是一款基于Bootstrap的开源UI框架,目前基于Bootstrap风格的扩展插件很多,比如Bootswatch.BootMetro等,这些之前我们都有做过介绍.StyleBootstrap应该说是对Bootstrap样式风格的一种扩展,除了一些基本的按钮.表单.菜单之外,StyleBootstrap还设计了功能全面的颜色拾取器,非常不错. StyleBootstrap的特点 拥有Bootstrap简洁高效的特点,配置灵活. 兼容任一版本的Bootstrap.
-
php bootstrap实现简单登录
本文实例为大家分享了php bootstrap实现简单登录的方法,供大家参考,具体内容如下 所有文件 记住是获取name键值对 from 里面 action就是你的动作 signin.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" con
-
通过Tabs方法基于easyUI+bootstrap制作工作站
登陆页如下所示: 下面给大家展示下具体实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <title>网络医院登陆</title> <st
-
Bootstrap实现登录校验表单(带验证码)
这个登陆窗口是双登陆窗口的,对IE8及早期版本不支持,可以根据自己的开发语言更换,我这个是asp的,其中的引用文件可以在网络上自行下载,如找不到可以留下邮箱~! 关键代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>scm登陆界面
-
jQuery UI Bootstrap是什么?
jQuery UI Bootstrap是一个将jQuery UI集成到Bootstrap上的CSS框架,jQuery UI Bootstrap不仅可以利用jQuery UI强大的控件库,同时还可以享受Bootstrap那种清新自然的主题风格,所以越来越多的前端开发者都在使用jQuery UI Bootstrap. jQuery UI Bootstrap的特点 ----- 基于jQuery UI,因此控件功能非常强大,可以使用全部的jQuery UI控件. ----- 基于Bootstrap,不
-
jfinal与bootstrap的登录跳转实战演习
前言:终于来了一篇有质量的文章,我个人感觉非常不错,<jfinal与bootstrap之间的登录跳转实战>.具体内容包含有点击登录弹出模态框.点击登录确认按钮后的validate.jfinal的validate.jfinal的session管理.ajax请求与返回信息处理.页面间智能跳转. 弹出模态框以及jquery validate可以参照jquery weebox总结.弹出窗口不居中显示?.jquery validate初上手系列文章. 从jfinal的validate说起 当然你可以参考
-
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
最近做了一个项目其中有项目需求涉及到访问控制,在访问需要登录才能使用的页面或功能时,会弹出登录框: 效果如下: 图 1-点击用户名时,如未登录弹出登录框 对这个功能的详细描述: 不涉及到登录时,登录框隐藏 涉及到登录时,登录框弹出到页面左上角 登陆成功后登录框隐藏 实现思路: 在body结束标签之前插入登录的div,设其定位方式为absolute,位置在左上角. 登录框默认的display属性为none.触发登录时,将该属性改为block 附上示例代码: <!DOCTYPE html> <
-
javascript弹出带文字信息的提示框效果
本文实例讲述了javascript弹出带文字信息的提示框效果.分享给大家供大家参考,具体如下: tooltips.js: // position of the tooltip relative to the mouse in pixel // var offsetx = 12; var offsety = 8; function newelement(newid) { if(document.createElement) { var el = document.createElement('di
-
Android 从底部弹出Dialog（横向满屏)的实例代码
项目中经常需要底部弹出框,这里我整理一下其中我用的比较顺手的一个方式(底部弹出一个横向满屏的dialog). 效果图如下所示(只显示关键部分): 步骤如下所示: 1.定义一个dialog的布局(lay_share.xml) <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/androi
-
layer弹出层 iframe层去掉滚动条的实例代码
如下所示: function newcont(url) { var index = layer.open({ title:false, type: 2, shadeClose: true, scrollbar: false, content: [url , 'no'] }); } 试了很多方法 最后发现layer的手册上就有,传入url的时候直接在后面加一个"no"就可以屏蔽掉滚动条... 以上这篇layer弹出层 iframe层去掉滚动条的实例代码就是小编分享给大家的全部内容了,希望
-
WPF弹出带蒙板的消息框
先看看效果图 思路 拿到父级窗体的内容,放入一个容器里,再在容器里放入一个半透明层.将整个容器赋给父级窗体的内容. 关闭时反向操作. 代码 消息窗弹出时 /// <summary> /// 弹出消息框 /// </summary> /// <param name="message">消息</param> /// <param name="owner">父级窗体</param> public st
-
关于Bootstrap弹出框无法调用问题的解决办法
问题描述 写项目中使用到了前端框架bootstrap,提供的功能很强大! bootstrap学习 然而在用bootstrap提供的弹出框组件时,弹出框怎么也弹不出! 按理说应该这样: 官方给出的样例是这样写的: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 弹出框(Popover)插件</title> <link href="http://libs.baidu.com/bo
-
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
1.Bootstrap弹出框示例 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框&
-
jQuery实现弹出带遮罩层的居中浮动窗口效果
本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pop window</title> <style> *{ padding: 0; margin: 0; } .hide{ display: none
-
Bootstrap弹出框（Popover）被挤压的问题小结
比较了下Bootstrap的popover和一些其它的开源项目,觉得Bootstrap的还算不错.没想到第一次就遇到了一个问题. 弹出框显示的时候如果贴近一个列的边沿,就会很窄,如果一个列比较宽还好,而如果遇到这样的列比如:<div class="col-md-2">,几乎任意位置显示的弹出框都被挤压了. 先看看我的实现以及效果: js: $(function (){ $("[data-toggle='popover']").popover({ trig
-
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
使用过bootstrap modal(模态框)组件的人都有一种困惑, 好好的一个弹出框怎么就无法垂直居中了呢?刚巧在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话少说,切入正题,Bootstrap弹出框垂直居中的问题,因为我拿到的弹出框样式并非垂直居中,而是top 10%,但页面长了,就显得特别恶心. 解决方案如下所示: 1.在css里,找到 .mo