关于Bootstrap 模态框的产生使用

最新推荐文章于 2022-10-26 09:27:09 发布

原创最新推荐文章于 2022-10-26 09:27:09 发布 · 653 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

Java 专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何利用Bootstrap框架在JSP页面中实现模态框功能。通过引入必要的CSS和JavaScript文件，配合JSP代码，可以轻松创建一个用于修改密码的模态对话框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、引包

1、bootstrapvoucherinstant.css

2、jquery-2.1.3.min.js

3、bootstrap.js

二、写jsp也面

1、index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="changepwdModeDialog.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

	<link rel="stylesheet" type="text/css" href="bootstrap/bootstrapvoucherinstant.css">
	<script type="text/javascript" src="bootstrap/jquery-2.1.3.min.js"></script>
	<script type="text/javascript" src="bootstrap/bootstrap.js"></script>
	<script type="text/javascript">
		function openModel(){
			//alert("cc");
			$("#chooseModal").modal('show');
		}
	</script>
  </head>
  
  <body>
  	
    <button  onclick="openModel();">产生模态框</button>
  </body>
</html>

2、changepwdModeDialog.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>修改密码</title>
<script type="text/javascript">
	function saveLayoutModle(){
		var userId=$("#SuserId").val();
		var newpwd=$("#password").val();
		var cfmpwd=$("#cfmpwd").val();
		var result=true;
		if(newpwd==""){
			alert("新密码设置不能为空！");
			$("#password").focus();
			result=false;
		}else if(newpwd.toString().length<6){
			alert("新密码设置错误！密码长度不少于6位！");
			$("#password").focus();
			result=false;
		}
		if(!result){
			return result;
		}else{
			if(cfmpwd==""){
				alert("确认密码设置不能为空！");
				$("#cfmpwd").focus();
				result=false;
			}else if(cfmpwd.toString().length<6){
				alert("确认密码设置错误！密码长度不少于6位！");
				$("#cfmpwd").focus();
				result=false;
			}
		}
		if (!result) {
			return result;
		}else{
			if(newpwd!=cfmpwd){
				alert("确认密码与新密码不一致！");
				$("#cfmpwd").focus();
				result=false;
			}
		}
		if(result==true){
			document.forms[0].action = "${ctx}/hotel/hotel!modpwd.action?id="+userId+"&password="+newpwd;
			document.forms[0].submit();
		}
		
	}
</script>
</head>
<body>
		<!-- 模态框（Modal） -->
	<div  class="container" style="width:200px">
		<div class="modal fade" id="chooseModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width:480px">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">×</button>
						<h4 class="modal-title" id="myModalLabel">修改密码：</h4>
					</div>
					<div class="modal-body">
					   <div id="itemInputDiv">
					   </div>
					</div>
					<div class="modal-footer">
						<button type="submit" class="btn btn-primary pull-left"  style="margin-left:150px" onclick="saveLayoutModle();">
		                      	  确定
		                </button>
		                <button type="button" class="btn btn-primary pull-right" style="margin-right:150px"
		                        data-dismiss="modal">取消
		                </button>
		            </div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
	</div>

		<!-- /.modal -->
</body>
</html>

三、这样就可以产生模态框