Insert title here

小熊商城注册功能与首页图片展示

小熊商城注册功能与首页图片展示

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>注册</title>

<script src='resource/js/jquery.min.js'></script>
<script type="text/javascript" src="resource/js/jquery.my-modal.1.1.js"></script>
<link rel="stylesheet" type="text/css"
	href="resource/css/jquery.my-modal.1.1.winStyle.css">
</head>

<body class="login-body">

	<div>
		<div class="imgdiv">
			<img class="imgsrc" src="resource/img/img1.jpg">
		</div>
		<div class="imgdiv">
			<img class="imgsrc" src="resource/img/img2.jpg">
		</div>
		<div class="imgdiv">
			<img class="imgsrc" src="resource/img/img3.jpg">
		</div>
		<div style="clear: both;"></div>
	</div>
	
	<div style="text-align: center;">
		<button class="btn1">注册</button>
	</div>

	<div class="m-modal" style="display: none;">
		<div class="m-modal-dialog" style="margin-top: -100%;">
			<div class="m-top">
				<h4 class="m-modal-title">注册</h4>
				<span class="m-modal-close">×</span>
			</div>
			<div class="m-middle">

				<form name="regform"
					action="LoginAndRegistServlet?action=registact" method="post">
					<div class="login-wrap">
					
						<div class="fmdiv">
							<input class="fmipt" type="text" name="username" placeholder="请输入用户名">
						</div>
						<div class="fmdiv">
							<input class="fmipt" type="password" name="password" placeholder="请输入密码">
						</div>
						<div class="fmdiv">
							<input class="fmipt" type="password" name="repassword" placeholder="请确认密码">
						</div>
					</div>

				</form>

			</div>
			<div class="m-bottom">
				<button class="m-btn-sure">注册</button>
				<button class="m-btn-cancel">取消</button>
			</div>
		</div>
	</div>
	
	<style>
		
		
		.imgsrc{
			height: 400px;
			width: 100%;
		}
		
		.imgdiv{
			float: left;
			width: 30%;
			height: 400px;
			margin: 1%;
		}
		
		.btn1{
			background: #2d97e3;
			border: unset;
			padding: 20px 40px;
			color: white;
		}
	
		.fmdiv{
			margin: 10px;
		}
	
		.fmipt{
			width: 100%;
			height: 30px;
		}
	</style>
	
	<script>
		var m1 = new MyModal.modal(function() {
			document.regform.submit();
		});
		$('.btn1').on("click", function() {
			m1.show();//显示
			/*隐藏的方法*/
			//m1.hide()
		});

		if ("${message}") {
			alert("${message}");
		}
	</script>

</body>
</html>

使用jQuery Modal实现


仅有注册功能



¥5

微信购买 支付宝购买

相似文章

0 条留言

留言

Insert title here
在线客服
联系方式
微信:13265346583 QQ:2196316269

扫码联系客服