bootstrap多模态框参考

最新推荐文章于 2024-04-20 12:04:09 发布
最新推荐文章于 2024-04-20 12:04:09 发布
阅读量678 收藏 1
点赞数
分类专栏： 开发中碰到的问题 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010734213/article/details/82775224
版权 
<%@ 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="查询"/>
				<!-- 导出Excel -->
				<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>
	<!-- 条件查询end -->
	
	<!-- 快速查询begin -->
	<!-- 快速查询end -->
	
	<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>财政拨款（万元）</th>
				<th>自筹资金（万元）</th> -->
				<th width="4%">申报年度</th>
				<th width="4%">项目开始时间</th>
				<th width="4%">项目结束时间</th>
				<!-- <th>联系人</th>
				<th>联系电话</th>
				<th>负责人</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>
    				<!-- onclick事件实现传值 -->
    				<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"%>

<!-- 模态框（Modal）：短信发送 -->
<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"> &times; </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><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<!-- 模态框（Modal）：短信列表信息 -->
<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"> &times; </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("<tr>");
						   		html.push("<td width='3%'>"+list[i].projectName+"</td>");
						   		html.push("<td width='1%'>"+list[i].receiveMan+"</td>");
						   		html.push("<td width='1%'>"+list[i].phone+"</td>");
						   		html.push("<td width='2%'>"+list[i].content+"</td>");
						   		html.push("<td width='2%'>"+list[i].sendManId+"</td>"); 
						   		html.push("<td  width='2%'>"+list[i].sendTime+"</td>");
						   		//1 已发送、-1 发送失败
						   		if (list[i].status == '1') {
						   			html.push("<td width='1%'>已发送</td>");
						   		} else {
						   			html.push("<td width='1%'>发送失败</td>");
						   			
						   		}
						   		html.push("</tr>");
						   		
						  }
						 $("#tbody_tr").html(html);
					  }
				  }
		     });	
		});
	}
</script>
Jayin_chan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
修改 bootstrap 多个模态对话框 焦点冲突问题 BUG
09-12
修改 bootstrap 多个模态对话框 焦点冲突问题
bootstrap 模态框
学而不思则罔 思而不学则殆
06-17 1299
我们需要引入bootstrap.min.js 先创建模态框的触发装置： <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框 data-toggle：插件，这里选择模态框。 data-target：定义模态框id的值。注意如果模态框的id="
Bootstrap 5 保姆级教程（十一）：模态框 & 提示框
最新发布
Flag少侠的博客
04-20 967
提示框要写在 JavaScript 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。通过向元素添加 data-bs-toggle="tooltip" 来来创建提示框。类名：modal-fullscreen。默认情况下提示框显示在元素上方。类名：modal-xl。类名：modal-lg。
Bootstrap 模态框
书香水墨
07-25 664
一、Bootstrap 模态框 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等 1.1简单模态框 <div class="container"> <h2>模态框实例</h2> <!-- 按钮：用于打开模态框 --> <button...
bootStrap模态框
weixin_42673117的博客
10-29 642
1、在js文件夹里面新建bootstrap-dialog.js文件 2、粘贴下列代码 (function($) { window.Bootstrap = function() { var tipHtml = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' + '<div class="modal-dialog
Bootstrap使用模态框
十年树木的博客
02-03 855
静态模态框： × 选择文件 取消 确定 1）使用javascript来打开modal： $('#modal
bootstrap多层模态框滚动条消失的问题
08-29
本篇文章主要介绍了bootstrap多层模态框滚动条消失的问题，具有一定的参考价值，有兴趣的可以了解一下
实例详解BootStrap的动态模态框及静态模态框
10-18
要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样。接下来通过实例代码给大家介绍BootStrap的动态模态框及静态模态框,需要的朋友可以参考下
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
08-28
本篇文章主要介绍了Bootstrap 模态框多次显示后台提交多次BUG的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap模态框实现拖拽效果
01-21
本文实例为大家分享了bootstrap模态框实现拖拽效果，供大家参考，具体内容如下 项目中用的有点乱，jquery和angularjs一起搞，有些插件用的jquery版本的，有的插件用的ng版本的。搞到现在测试了一轮又一轮，发现modal...
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
08-31
主要介绍了扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框,需要的朋友可以参考下
bootstrap模态框的使用 及 解决多个模态框嵌套出现滚动条错乱问题
haogemr的博客
03-15 1721
模态框的使用模板 新建aaa.html &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt; &lt;div class="modal-dialog"
BootStrap如何支持多模态框弹窗
Yannis的技术之路
07-06 935
$(document).on('show.bs.modal', '.modal', function(event) { $(this).appendTo($('body')); }).on('shown.bs.modal', '.modal.in', function(event) { setModalsAndBackdropsOrder(); ...
黄聪： bootstrap 多模态框实现
weixin_33804582的博客
03-23 144
  默认情况下，bootstrap模态框是不支持多个覆盖的，下面是一个解决办法(本人亲测), 将下面的代码复制到当前需要多个模态框的页面，问题就可以解决 $(document).on('show.bs.modal', '.modal', function(event) { $(this).appendTo($('body')); }).on('shown.bs...
多模态框遮罩问题
m0_48079732的博客
12-26 181
bootstrap模态框不支持多模态框，即不支持弹出了一个模态框之后，再弹出第二个模态框，只支持弹出一个模态框 想要弹出第二个模态框，在js中加入如下代码 $(document).on('show.bs.modal', '.modal', function(event) {undefined $(this).appendTo($('body')); }).on('shown.bs.modal', '.modal.in', function(event) {undefined setMo
bootstrap之模态框
catherine_sfy的博客
03-01 400
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 ...
bootstrap实现多模态框的方法
热门推荐
全赞功成湿的博客
05-13 1万+
本文描述了bootstrap模态框用来做多模态框的问题，解决并实现了bootstrap多模态框。
解决bootsrap多层模态框叠加问题
01-18 915
最近在项目中使用bootstrap模态框的时候发现了一个问题，那就是bootstrap模态框不支持多模态框，即不支持弹出了一个模态框之后，再弹出第二个模态框，只支持弹出一个模态框，虽然说第二个或更多模态框可以正常弹出，但是会出现问题，这里就两个我发现的问题来分享给大家：首先来看一下正常一个模态框弹出的样子： 问题一： 当弹出多个模态框背景遮罩增多，导致背景的颜色越来越深，如下图：...
如何本地创建svn库
无为萌新
09-19 1万+
在本地机器上搭建一个SVN仓库步骤 1、安装SVN服务端和客户端(不知道自己有没有安装两个，因为是很久前安装的，但客户端肯定是有装的) 2、创建svn库空文件夹D:\chen，并在chen文件夹中右键选中TortoiseSVN -&gt;create repository here 3、创建存放项目文件夹D:\project，并在project文件夹内右键选中SVN Checkout，并在URL ...
Bootstrap 3 模态框chosen
05-23
如果您想在 Bootstrap 3 模态框中使用 Chosen 插件，可以按照以下步骤进行操作： 1. 首先，确保您已经引入了 Bootstrap 和 Chosen 插件的相关文件。 2. 在模态框的 HTML 代码中，添加一个 select 元素，并为其添加...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值