bootstrap modal模态框

bootstrap modal模态框

因为项目中用到了bootstrap table 显示表格且要为每一行设置一个按钮要就能查看信息，所以就直接用bootstrap带的模态框，但是有个缺点就是异步的时候比较慢，体验不是特别的好，至于后来换哪种弹框在本文结尾会叙述。

modal bootstrap

首先，先引入bootstrap.js和.css文件，如果要是跟我一样使用bootstrap table还需要进入table的相关js和css 文件

<link href="/BOLI_JT/static/bootstrap/3.3.4/css_default/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script src="/BOLI_JT/static/bootstrap/3.3.4/js/bootstrap.min.js"  type="text/javascript"></script>
<link href=" ${ctxStatic}/bootstrap-table-master/dist/bootstrap-table.min.css" rel="stylesheet">
<script type="text/javascript" src="${ctxStatic}/bootstrap-table-master/dist/bootstrap-table.min.js"></script>
<script src="${ctxStatic}/bootstrap-table-master/src/locale/bootstrap-table-zh-CN.js"></script>

###添加按钮

	  function operateFormatter(value, row, index) {
	      return [
	      '<button id="adjustButton" type="button" class="btn btn-info btn-xs" style="margin-right:15px;">调整</button>'	
	      ].join('');
	      }
	  
	  window.operateEvents = {
	            "click #adjustButton": function (e, value, row, index) {    
	            /*  $("#teamId").val(row.teamId);
	             $("#updateTime").val(row.startTime);
	             $("#planIds").val(row.planId); */
	             $("#myModal").modal({
	            	 remote:"${ctx}/plan/blPlanAdjustment/adjustmentForm?id="+row.id
	             });                     
	         }
	           
	    };
	  

如代码所示，使用.modal()方法就可以为你定义的模态框显示了，其中,remote 中填写的地址返回的是一个页面，这样就可以将该页面加载在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>
    </div>
</div> 

这三个div是需要你写在你想触发点击事件的页面中的，然后通过remote就会将页面和数据显示在modal-content中，缺点就是如果你也是这么用的，那么在你要加载进模态框中页面中，用不了form.validate()中的ajaxSubmit，所以只能自己在该页面为按钮设置点击时间，进行相应的操作。别忘了事件要写在 $(function () { });中，否则是不会有效果的。

 <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">
			<form:form id="inputForm" modelAttribute="blPlanAdjustment" method="post" class="form-horizontal">
			<form:hidden path="id"/>
			<sys:message content="${message}"/>	
			 <fieldset>
			    <div class="form-group">
			       <label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>计划:</label>
			       <div class="col-sm-4">
						<form:input path="planId" value="${blPlanTeam.planId}" readonly="true" htmlEscape="false" class="form-control" style="width:200px;"/>	
					</div>
			    </div>	
			    
			    <div class="form-group">
				   <label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>班组:</label>
			        <div class="col-sm-4">
						<form:input path="teamId" value="${blPlanTeam.teamId}" readonly="true" htmlEscape="false" class="form-control" style="width:200px;"/>	
					</div>	
			    </div>	
			        <div class="form-group">
				   <label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>分配日期:</label>
			        <div class="col-sm-4">
						<form:input path="updateTime" value="${blPlanTeam.startTime}" readonly="true" htmlEscape="false" class="form-control" style="width:200px;"/>	
					</div>	
			    </div>	
			    <div class="form-group">
		    	    <label class="col-sm-1 control-label"  style="font-size:13px;"><font color="red">*</font>调整数量:</label>
					<div class="col-sm-4">
					   <form:input path="adjustmentNumbers" htmlEscape="false" placeholder="请输入调整数量" class="form-control required" style="width:200px;"/>
					</div>
			     </div>		
			   <div class="form-group">		
					<label class="col-sm-1 control-label"  style="font-size:13px;"><font color="red">*</font>调整原因:</label>
					<div class="col-sm-4">
					   <form:textarea path="adjustmentDesc" rows="6" cols="40" />
				    </div>	 
			     </div>		
			     <!--  <div class="panel-footer" align="right">			
				     <button type="submit" class="btn btn-primary">调整计划</button>
		         </div>	 -->		        
			 </fieldset>
		</form:form>
		</div>
          <div class="modal-footer">
                <button type="submit" id ="fromSubmit" class="btn btn-primary">调整</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>            
         </div> 
	 

这些是要加载到模态框中的页面信息，后台代码我就不多叙述了，效果如下

但是就如文章开头说的一样，加载时会比较慢，体验不是特别好。

另一种弹框

我在项目中采用的另一种弹框，是layer插件

  top.layer.open({
					    type: 2,  
					    area: ['1000px', '500px'],
					    title:"调整计划",
					    name:'friend',
					    content: "${ctx}/plan/blPlanAdjustment/adjustmentPlanForm?id="+row.id,
					    /* btn: ['调整', '关闭'],
					    yes: function(index, layero){
					 	    
						  },
						  cancel: function(index){
							  
					      } */
					});

这样实现的效果跟之前的模态框有点差距但是不大，完全可以替换，功能也是可以实现，而且，在加载时，比模态框要快，体验更好。

可能页面效果没有那个好看，但是加载的要快，所以也就暂时做了两个版本的弹框，以供选择。

离线写博客

本文为本人根据项目需求研究写出，也许有所不足，真诚的希望，有大牛能帮我纠正一下，我的错误，互相提高，以便以为可以分享更好的代码和技术给大家，携手在研发的道路上一去不复返。