高级弹出层(窗体)


窗体与窗口不同,它只有一个关闭按钮,常用于弹出登录框

点击弹出登录框
代码
<button id="demo" class="button blue">登录</button>

<script>
	$("#demo").click(function() {
		javaex.dialog({
			type : "dialog",	// 弹出层类型
			width : "400",
			height : "300",
			url : "login.html"
		});
	});
</script>

参数说明(使用属性默认值时,可以缺省该属性)
序号 属性名 默认值 说明
1 type 必须是dialog
2 width 300 弹出层的宽度
3 height 弹出层的高度
4 url 页面地址,jsp页面转发的话,就可请求地址

登录页面代码参考
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--字体图标-->
<link href="http://cdn.javaex.cn/javaex/pc/css/icomoon.css" rel="stylesheet" />
<!--动画-->
<link href="http://cdn.javaex.cn/javaex/pc/css/animate.css" rel="stylesheet" />
<!--骨架样式-->
<link href="http://cdn.javaex.cn/javaex/pc/css/common.css" rel="stylesheet" />
<!--皮肤(缇娜)-->
<link href="http://cdn.javaex.cn/javaex/pc/css/skin/tina.css" rel="stylesheet" />
<!--jquery,不可修改版本-->
<script src="http://cdn.javaex.cn/javaex/pc/lib/jquery-1.7.2.min.js"></script>
<!--全局动态修改-->
<script src="http://cdn.javaex.cn/javaex/pc/js/common.js"></script>
<!--核心组件-->
<script src="http://cdn.javaex.cn/javaex/pc/js/javaex.min.js"></script>
<!--表单验证-->
<script src="http://cdn.javaex.cn/javaex/pc/js/javaex-formVerify.js"></script>
</head>
<style>
	body{background-color: #fff;}
	.login-form{background: #fff;margin:40px;}
	.login-title{font-size: 20px;text-align: center;margin-bottom: 25px;}
	.login-item{display: flex;margin-bottom: 14px;}
	.login-link{margin-bottom: 14px;}
	.login-link label, .login-link a{color: #9B9B9C;}
	.login-link a{font-size: 14px;}
	.login-text{min-height: 40px;width: 100%;color: #B3B3B3;font-size: 14px;border: 1px solid #EEEFF0;border-radius: 3px;font-family: Helvetica, "microsoft yahei", sans-serif;padding-left: 16px;outline: none;}
	.button.login{background-color: #2D9C8B;color: white;width: 100%;border-radius: 3px;font-size: 14px;height: 40px;line-height: 40px;}
	.login-link .line{display: inline-block;width: 1px;height: 12px;background-color: #EEEEEE;margin: 0 6px;}
</style>
<body>
	<!--登录-->
	<div class="login-form">
		<form id="login">
			<!--标题-->
			<div class="login-title">登录</div>
			<!--用户名-->
			<div class="login-item">
				<input type="text" class="login-text" id="login_name" name="loginName" data-type="必填" placeholder="用户名" />
			</div>
			<!--密码-->
			<div class="login-item">
				<input type="password" class="login-text" name="passWord" data-type="必填" placeholder="请输入密码" />
			</div>
			<!--登录按钮-->
			<div class="login-item">
				<input type="button" id="submit" class="button login" value="登录" />
			</div>
			<!--底部链接-->
			<div class="login-link">
				<label zoom="0.9"><input type="checkbox" class="fill" checked/>下次自动登录</label>

				<span style="float: right;">
					<a href="#" target="_blank">忘记密码</a>
					<span class="line"></span>
					<a href="javascript:;" onclick="showDiv1()">注册</a>
				</span>
			</div>
		</form>
	</div>
</body>
<script>
	// 监听点击保存按钮事件
	$("#submit").click(function() {
		// 表单验证函数
		if (javaexVerify()) {
			// 返回错误信息时,可以添加自定义异常提示。参数为元素id和提示
			// addErrorMsg("username", "用户名不存在");
			// 提交
			// $("#form").submit();
			alert("验证通过");
		} else {
			return false;
		}
	});
</script>
</html>