bootstrap多模态框参考

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>已办列表title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
			//显示隐藏查询条件
			/* $("#btnSearch").click(function(e) {
				$("#searchFormDiv").toggle();
			}); */
			
			 $("#btnExport").click(function(){
				top.$.jBox.confirm('确认要导出数据吗?导出数据为查询结果集!', '系统提示', function(v,h,f){
					if (v == 'ok') {
						$("#searchForm").attr("action","${ctx}/project/project/exportFile?viewName=doneList");
						$("#searchForm").submit();
					}
					return true;
				});
			});  
		});
		
		
		
		/*模态框传值:将手机号码传到模态框中*/
		function sendValues(projectId,phoneNums){
			$("#projectId").val(projectId);
			if (phoneNums) {
				$("#phoneNums").val(phoneNums);
			}
		}
		
		/*发送短信*/
		function sendSms(){
			//校验手机号码及短信内容
			if ($("#phoneNums").val() == '') {
		    	top.$.jBox.tip("请输入手机号码!"); 
		        return false;
		    }
		    if ($("#smsContent").val() == '') {
		    	top.$.jBox.tip("请输入短信内容!"); 
		        return false;
		    }
		    //调用短信发送端口
		    $.ajax({  
		          url: ctx+'/project/smsSupervision/sendSms?projectId='+$("#projectId").val()+'&phone='+$("#phoneNums").val()+'&content='+$("#smsContent").val(),
		          type: 'POST', 
		          async : false,
		          success : function(data) {
		          	    if (data.code == "200") {
		          	    	$.jBox.tip("发送短信成功!","success");
						} else {
							top.$.jBox.tip('发送短信失败!');
						}
		          	  $("#smsModal").modal('hide');//关闭模态框
				}
		     });
		    
		}
		
		function resetSearch(){
			location.href = ctx+'/project/project/doneList';
		}
		
	script>
	<style type="text/css">
		/*查询条件label大小*/
		.form-search .ul-form li label {width: 120px;text-align: right;}
		.text-center th{text-align:center;}
		td.align-center {text-align:center;}
	style>
head>
<body>
	<ul class="nav nav-tabs" style="display: none;">
		<li class="active"><a id="a_list_url" href="${ctx}/project/project/doneList">项目列表a>li>
	ul>
			<li class="btns">
				<input id="btnSubmit" class="btn btn-primary" type="submit" onclick="return page();" value="查询"/>
				
				<input id="btnExport" class="btn btn-success" style="width: 100px;" type="button" value="导出Excel" />
				<input id="reset" class="btn" type="button" value="重置" onclick="resetSearch();"/>
			li>
			<li class="clearfix">li>
		ul>
	form:form>
	
	
	
	
	
	<sys:message content="${message}"/>
	<table id="contentTable" class="table table-striped table-bordered table-condensed">
		<thead>
			<tr class="text-center">
				<th width="2%">序号th>
				<th width="12%">项目名称th>
				<th width="4%">项目编号th>
				<th width="4%">项目级别th>
				<th width="10%">承建单位th>
				<th width="8%">项目机构th>
				
				<th width="4%">申报年度th>
				<th width="4%">项目开始时间th>
				<th width="4%">项目结束时间th>
				
				<th width="10%">合作单位th>
				<th width="5%">状态th>
				<th width="13%">操作th>
			tr>
		thead>
		<tbody>
		<c:forEach items="${page.list}" var="project" varStatus="st">
			<tr>
				<td class="align-center">${st.index+1}td>
				<td>${project.name}td>
				<td>${project.no}td>
				<td class="align-center">
					${project.level}
				td>
				<td>${project.constructionUnit}td>
				<td>${project.type}td>
				<%-- <td>${project.financeFunds}td>
				<td>${project.selfFunds}td> --%>
				<td class="align-center">${project.year}td>
				<td class="align-center">
					<fmt:formatDate value="${project.startDate}" pattern="yyyy-MM-dd" />
				td>
				<td class="align-center">
					<fmt:formatDate value="${project.endDate}" pattern="yyyy-MM-dd" />
				td>
				<%-- <td>${project.linkman}td>
				<td>${project.linkPhone}td>
				<td>${project.principals}td> --%>
				<td>${project.cooperateUnit}td>
				<td  class="align-center">${project.linkName}td>
				<td>
    				<a href="${ctx}/project/project/view?id=${project.id}">查看a>
    				
    				<a href="#smsModal" data-toggle="modal" onclick="sendValues('${project.id}','${project.createUserMobile}');">短信发送a>
    				<a href="#smsInfoModal" data-toggle="modal" onclick="showSmsInfo('${project.id}');">短信查看a>
    				
				td>
			tr>
		c:forEach>
		tbody>
	table>
	<div class="pagination">${page}div>
	
	<%@include file="/WEB-INF/views/modules/project/smssupervision/smsModalInfo.jsp"%>
	
body>
html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>


<div class="modal fade" id="smsModal" tabindex="-1" role="dialog" aria-labelledby="smsModalLabel" aria-hidden="true" style="display:none;">
	<div class="modal-dialog">
		<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="smsModalLabel"> 短信发送 h4>
			div>
			<div class="modal-body">
				<input id="projectId" type="hidden">
				<label style="width:170px;text-align: right;">手机号码(多个以","隔开): label>
				<input style="width:60%;" id="phoneNums" type="text"  placeholder="请输入手机号码"><br>
				<label style="width:170px;text-align: right;">短信内容: label>
				<textarea rows="3" style="width:60%;"  name="smsContent" id="smsContent" placeholder="请输入短信内容">textarea>
		div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary" onclick="sendSms();">发送button>
			<button type="button" class="btn btn-default" data-dismiss="modal">关闭 button>
		div>
	div>
div>
div>


<div class="modal fade" id="smsInfoModal" tabindex="-1" role="dialog" aria-labelledby="smsInfoModalLabel" aria-hidden="true"   style="display:none;"
	style="width: 800px;margin-left: -400px;">
	<div class="modal-dialog">
		<div class="modal-content">
			
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × button>
				<h5 class="modal-title" id="smsInfoModalLabel">短信列表信息 h5>
			div>
			
			<div class="modal-body">
				<table id="table" class="table table-striped table-bordered table-condensed">
					<thead>
						<tr class="text-center">
							<th width="12%">项目名称th>
							<th width="12%">接收人th>
							<th width="12%">手机号码th>
							<th width="12%">短信内容th>
							<th width="12%">发送人th>
							<th width="12%">发送时间th>
							<th width="12%">状态th>
						tr>
					thead>
					<tbody id="tbody_tr">
					tbody>
					table>
			div>
			
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭 button>
			div>
		div>
div>
div>

<script type="text/javascript">
	function showSmsInfo(projectId){
		$('#smsInfoModal').on('show.bs.modal', function () {
			$.ajax({  
		          url: ctx+'/project/smsSupervision/listByProjectId?projectId='+projectId,
		          type: 'POST', 
		          async : false,
		          success : function(data) {
		        	  if(data.code == "200"){
						  var list = data.list;
						  var html = [];
						  for(var i=0;i<list.length;i++){
							  	html.push("");
						   		html.push(""+list[i].projectName+"");
						   		html.push(""+list[i].receiveMan+"");
						   		html.push(""+list[i].phone+"");
						   		html.push(""+list[i].content+"");
						   		html.push(""+list[i].sendManId+""); 
						   		html.push(""+list[i].sendTime+"");
						   		//1 已发送、-1 发送失败
						   		if (list[i].status == '1') {
						   			html.push("已发送");
						   		} else {
						   			html.push("发送失败");
						   			
						   		}
						   		html.push("");
						   		
						  }
						 $("#tbody_tr").html(html);
					  }
				  }
		     });	
		});
	}
script>

你可能感兴趣的:(开发中碰到的问题)