关于Bootstrap 模态框的产生使用

来源：互联网发布：台海危机知乎编辑：程序博客网时间：2024/06/03 02:25

一、引包

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>

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

0 0