2017-12-14 23:18:29 qq_40714902 阅读数 503

最近做的网站涉及到访问控制,在访问需要登录才能使用的页面或功能时,会弹出登录框: 
效果如下: 
这里写图片描述
图 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="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74

一种完全用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>
2018-08-31 15:45:41 m18870420619 阅读数 1284

1,添加js文件

<script type="text/javascript" src="/H-ui.admin/lib/jquery/1.9.1/jquery.min.js?version=0.001"></script> 
<script type="text/javascript"  src="/H-ui.admin/lib/bootstrap-modal/2.2.4/bootstrap.js"></script>

2,页面添加按钮和弹出层

<div>
     <button data-toggle="modal" data-target="#myModal" class="btn btn-success radius ml-50" type="button">弹出或隐藏</button>
</div>


<div class="modal fade" id="myModal" tabindex="-10000" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="padding-bottom: 0px;">
        <div class="modal-header" style=" border: none;">
                <div class="modal-title">选择片区</div>
            </div>
            <div class="modal-body">
                <ul id="areaTree" class="ztree"></ul>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-primary"type="button">确定</button>
            </div>
        </div>
    </div>
</div>

.modal-body { 
    height: 120px;
    overflow-y: scroll;

.modal.fade.in {
    top: 30%;
}

2019-11-06 10:19:36 z_zhy 阅读数 27

点击按钮button,弹出一个对话框(简单的bootstrap模态框)


最近搞了搞bootstrap的模态框,总是会出现页面变成灰黑色的样子,在网上找了好多办法都没能成功,最后没办法只能用这种简单的方式,其实需求很简单就是要修改密码就可以了

下面是我的代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>
       修改密码
    </title>
    <script>
        var password = function(){
            var password = prompt ("输入新密码: ", "123456");/*第一个变量为提示语,第二个变量为默认初始值*/
            alert("修改后的密码:"+password);
        }
    </script>
</head>
<body>
<button onclick="password();">修改密码</button>
</body>
</html>

这种办法对于要求不高的需求是很不错的解决办法

2014-12-19 11:32:32 daidaineteasy 阅读数 9647

在开发项目的时候,我们经常会有增、删、改的一些操作,可能我们在操作成功后,会跳转到一个成功或者失败提示页面,或者直接重定向到列表查询页,然后给出一个alert提示。

今天给大家介绍一下下边这个漂亮的 页面右上角咆哮提示效果 的实现,效果图如下:





1)效果采用bootstrap-growl插件,在使用的时候需要引入对应的对应的CSS和JS:

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

2)我将咆哮效果的代码块写到一个tag标签中了,我们在使用的时候,可以直接引用一下tag标签即可:

errors.tag
<%@ tag pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:if test="${not empty message}">
	<script type="text/javascript">
		$(function() {
			var msg = {};
			try {
				msg = $.parseJSON('${message}');
			} catch (e) {
				msg.content = '${message}';
				msg.result = true;
			}
			
			if (msg.result == true) {
				$.growl({
					title: '成功提示:',
					message: msg.content
				},{
					type:"success"
				});
			} else {
				$.growl({
					title: '失败提示:',
					message: msg.content
				},{
					type:"danger"
				});
			}
		});
	</script>
</c:if>

3)Controller端实现,就像下边演示的这么简单

@Controller
@RequestMapping(value="/test")
public class TestController {

	@RequestMapping(value = "add")
	public String add(ModelMap model) throws Exception {
		
		model.put("message", "{\"result\":true, \"content\": \"创建新用户成功!\"}");
//		model.put("message", "{\"result\":false, \"content\": \"创建新用户失败,请重新创建或联系管理员解决!\"}");
		return "index";
	}
	
	@RequestMapping(value = "add2")
	public String add2(RedirectAttributes redirectAttributes) throws Exception {
		redirectAttributes.addFlashAttribute("message", "{\"result\":true, \"content\": \"创建新用户成功!\"}");
//		redirectAttributes.addFlashAttribute("message", "{\"result\":false, \"content\": \"创建新用户失败,请重新创建或联系管理员解决!\"}");
		//重定向
		return "redirect:/test/xxx";
	}
}

4)最后JSP页面代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!-- 加载一下errors.tag标签所在的tags文件夹 -->
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  
    <title>测试</title>
    
	<!-- bootstrap 引入 -->
	<link href="${ctx}/static/bootstrap/css/bootstrap.css" rel="stylesheet" />
	<!-- bootstrap 引入 -->
  </head>
  
  <body>
    This is my JSP page. <br>
    
    <script src="xxx/js/jquery.min.js" type="text/javascript"></script>
    <script src="xxx/bootstrap/js/bootstrap.js" ></script>
    <script src="xxx/bootstrap/js/bootstrap-growl.js" ></script>

    <!-- 只需要引入一下此标签即可实现咆哮提示效果 -->
    <tags:errors></tags:errors>
  </body>
</html>

在常用的浏览器中测试,暂未发现不兼容情况,可放心使用!


2018-09-01 13:09:18 qq_38543537 阅读数 5266

首先我们需要打开Webstorm编辑器,接着我们点击文件,设置,然后会出现下图的模样:

点击上图2的按钮Browse,出现如下页面,然后再搜索框中输入bootstrap

安装成功之后根据提示重启编辑器即可

bootstrap提示框示例

阅读数 3069

没有更多推荐了,返回首页