小熊商城注册功能与首页图片展示
- 2021-11-17 01:08:25
- JSP+SERVLET
- 浏览次数 540
小熊商城注册功能与首页图片展示
<%@ 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
微信购买 支付宝购买
在线客服1号
0 条留言