BootStrap模态框的使用

最新推荐文章于 2025-10-21 10:34:21 发布

原创最新推荐文章于 2025-10-21 10:34:21 发布 · 373 阅读

1 ·

CC 4.0 BY-SA版权

崩溃的我专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在SpringMVC项目中利用BootStrap模态框实现资料编辑功能，通过点击按钮触发模态框，展示并修改个人信息，包括电话、QQ、微信等字段，并介绍了日期类型转换的方法。

今天的收获就是了解了如何使用使用BootStrap模态框

点击修改资料按钮就会触发模态框

<!-- 按钮触发模态框，点击修改资料 -->
	<div style="text-align: center">
		<button class="btn btn-primary btn-lg" data-toggle="modal"
			data-target="#myModal">
			编辑资料
		</button>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1"
			role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							编辑资料
						</h4>
					</div>
					<div class="modal-body" style="text-align: center">
						<form class="bs-example bs-example-form" role="form"
							id="UpdateStudentForm">

							<input type="hidden" name="stdid"
								value="${Astudent.stdid}" />
							<input type="hidden" name="stdname"
								value="${Astudent.stdname}" />
							<input type="hidden" name="stdsex"
								value="${Astudent.stdsex}" />
																								
							<input type="hidden"  name="stdbirth"
							readonly value="<fmt:formatDate value="${Astudent.stdbirth}" 
							pattern="yyyy-MM-dd"/>">
							
							<br>
							<br>
							<div class="form-group">
								<label class="col-lg-3 control-label">
									电话 :
								</label>
								<div class="col-lg-9">
									<input type="text" class="form-control" name="stdcall"
										value="${Astudent.stdcall}"/>
								</div>
							</div>
							<br>
							<br>
							<div class="form-group">
								<label class="col-lg-3 control-label">
									QQ :
								</label>
								<div class="col-lg-9">
									<input type="text" class="form-control" name="stdqq"
										value="${Astudent.stdqq}" />
								</div>
							</div>
							<br>
							<br>
							<div class="form-group">
								<label class="col-lg-3 control-label">
									微信 :
								</label>
								<div class="col-lg-9">
									<input type="text" class="form-control" name="stdwechart"
										value="${Astudent.stdwechart}" />
								</div>
							</div>
							<br>
							<br>
							<div class="form-group">
								<label class="col-lg-3 control-label">
									现居城市 :
								</label>
								<div class="col-lg-9">
									<input type="text" class="form-control" name="stdcity"
										value="${Astudent.stdcity}" />
								</div>
							</div>
							<br>
							<br>
							<div class="form-group">
								<label class="col-lg-3 control-label">
									工作 :
								</label>
								<div class="col-lg-9">
									<input type="text" class="form-control" name="stdjob"
										value="${Astudent.stdjob}" />
								</div>
							</div>
							<br>
							<br>
							<div class="form-group">
								<label class="col-lg-3 control-label">
									最想说的话!
								</label>
								<div class="col-lg-9">
									<input type="text" class="form-control" name="stdsign"
										value="${Astudent.stdsign}" />
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default"
							data-dismiss="modal">
							关闭
						</button>
						<input type="submit" class="btn btn-primary"
							id="UpdateStudent" value="提交" />
					</div>
				</div>
			</div>
		</div>
	</div>

在SpringMvc中需要注意的是前台的是日期不能直接传到后台，需要进行日期类型的转换.。在input框中，日期格式转换如下
（注意：要在jsp头部添加标签----<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>）

<input type="hidden"  name="stdbirth"
			readonly value="<fmt:formatDate value="${Astudent.stdbirth}" 
			pattern="yyyy-MM-dd"/>">