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){
							  
					      } */
					});

這樣實現的效果跟之前的模態框有點差距但是不大，完全可以替換，功能也是可以實現，而且，在載入時，比模態框要快，體驗更好。

可能頁面效果沒有那個好看，但是載入的要快，所以也就暫時做了兩個版本的彈框，以供選擇。

離線寫部落格

本文為本人根據專案需求研究寫出，也許有所不足，真誠的希望，有大牛能幫我糾正一下，我的錯誤，互相提高，以便以為可以分享更好的程式碼和技術給大家，攜手在研發的道路上一去不復返。