修改弹窗的大小和textarea，让其随内容高度变化

WebUI/CallCenterWeb.UI/Business/WorkDC.html

@@ -467,7 +467,7 @@
 					type: 2,
 					content: "../CommonHtml/JiaoBan.html?wid=" + str, //iframe的url，no代表不显示滚动条
 					title: '工单交办',
-					area: ['45%', '40%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 			//领导批示
@@ -476,7 +476,7 @@
 					type: 2,
 					content: "../CommonHtml/Leader.html?wid=" + str, //iframe的url，no代表不显示滚动条
 					title: '领导批示',
-					area: ['45%', '40%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 			//市长批示
@@ -485,7 +485,7 @@
 					type: 2,
 					content: "../CommonHtml/shizhang.html?wid=" + str, //iframe的url，no代表不显示滚动条
 					title: '领导批示',
-					area: ['45%', '40%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 			//办理
@@ -494,7 +494,7 @@
 					type: 2,
 					content: "../CommonHtml/banli.html?wid=" + str, //iframe的url，no代表不显示滚动条
 					title: '办理工单',
-					area: ['45%', '40%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 			//督办
@@ -504,7 +504,7 @@
 					type: 2,
 					content: "../CommonHtml/Supervision_.html?wid=" + str + '&type=1', //iframe的url，no代表不显示滚动条
 					title: '督办',
-					area: ['35%', '30%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 
@@ -514,7 +514,7 @@
 					type: 2,
 					content: "../CommonHtml/Supervision_.html?wid=" + str + '&type=2', //iframe的url，no代表不显示滚动条
 					title: '监察',
-					area: ['35%', '30%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 			//强制结案
@@ -523,7 +523,7 @@
 					type: 2,
 					content: "../CommonHtml/StrongLawsuit.html?wid=" + str, //iframe的url，no代表不显示滚动条
 					title: '强制结案',
-					area: ['45%', '52%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 			 //回退BackDtail
@@ -532,7 +532,7 @@
 					type: 2,
 					content: "../CommonHtml/BackDatil.html?wid=" + str, //iframe的url，no代表不显示滚动条
 					title: '工单回退',
-					area: ['45%', '40%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 			//查收
@@ -581,7 +581,7 @@
 					type: 2,
 					content: "../CommonHtml/tuihuisq.html?wid=" + str, //iframe的url，no代表不显示滚动条
 					title: '申请退回工单',
-					area: ['35%', '30%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 			//审核退回申请
@@ -590,7 +590,7 @@
 					type: 2,
 					content: "../CommonHtml/shth.html?wid=" + str, //iframe的url，no代表不显示滚动条
 					title: '审核退回申请',
-					area: ['50%', '50%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 			//办理
@@ -608,7 +608,7 @@
 					type: 2,
 					content: "../CommonHtml/Timesq.html?wid=" + str, //iframe的url，no代表不显示滚动条
 					title: '申请延时',
-					area: ['45%', '40%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 			//审核申请延时
@@ -617,7 +617,7 @@
 					type: 2,
 					content: "../CommonHtml/shtime.html?wid=" + str, //iframe的url，no代表不显示滚动条
 					title: '审核延时申请',
-					area: ['45%', '40%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 			//诉求回访
@@ -626,7 +626,7 @@
 					type: 2,
 					content: "../CommonHtml/Back.html?wid=" + str, //iframe的url，no代表不显示滚动条
 					title: '工单回访',
-					area: ['45%', '40%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 			//重办工单
@@ -635,7 +635,7 @@
 					type: 2,
 					content: "../CommonHtml/Cb.html?wid=" + str, //iframe的url，no代表不显示滚动条
 					title: '重办工单',
-					area: ['45%', '40%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 			//结案
@@ -644,7 +644,7 @@
 					type: 2,
 					content: "../CommonHtml/lawsuits.html?wid=" + str, //iframe的url，no代表不显示滚动条
 					title: '诉求单结案',
-					area: ['45%', '40%'], //宽高
+					area: ['60%', '80%'], //宽高
 				});
 			}
 

WebUI/CallCenterWeb.UI/CommonHtml/AddAppeal.html

@@ -77,7 +77,7 @@
 						<tr>
 							<th class="Importent">内容:</th>
 							<td colspan="7">
-								<textarea id="content" name="" rows="" cols="" style="width: 100%;"></textarea>
+								<textarea data-adaptheight id="content" name="" rows="" cols="" style="width: 100%;"></textarea>
 							</td>
 						</tr>
 						<tr>
@@ -154,6 +154,7 @@
 			</div>
 		</div>
 		<script src="../css/laydate/laydate.js"></script>
+		<script src="../js/adjustHeight.js"></script>
 		<script>
 			var wid = helper.request.queryString("wid");
 			var submit;

WebUI/CallCenterWeb.UI/CommonHtml/AddAppeals.html

@@ -78,7 +78,7 @@
 						<tr>
 							<th class="Importent">内容:</th>
 							<td colspan="7">
-								<textarea id="content" name="" rows="" cols="" style="width: 100%;"></textarea>
+								<textarea data-adaptheight id="content" name="" rows="" cols="" style="width: 100%;"></textarea>
 							</td>
 						</tr>
 						<tr>
@@ -155,6 +155,7 @@
 			</div>
 		</div>
 		<script src="../css/laydate/laydate.js"></script>
+		<script src="../js/adjustHeight.js"></script>
 		<script>
 			var wid = helper.request.queryString("wid");
 			var submit;

WebUI/CallCenterWeb.UI/CommonHtml/AppealBack.html

@@ -13,7 +13,7 @@
 		<table  >
 			<tr>
 				<th >退回原因:</th>
-				<td colspan="2"><textarea name="" rows="" cols=""></textarea></td>
+				<td colspan="2"><textarea data-adaptheight name="" rows="6" cols=""></textarea></td>
 			</tr>
 			
 		</table>
@@ -22,9 +22,7 @@
 		</div>
 		</div>
 		   <script src="../css/laydate/laydate.js"></script>
-		   <script >
-		  
-		   </script>
+		   <script src="../js/adjustHeight.js"></script>
 	</body>
 </html>
 

WebUI/CallCenterWeb.UI/CommonHtml/AppealDeal.html

@@ -20,11 +20,11 @@
 			</tr>
 			<tr>
 				<th class="Importent">主办单位:</th>
-				<td colspan="2"><textarea name="" rows="" cols=""></textarea></td>
+				<td colspan="2"><textarea data-adaptheight name="" rows="" cols=""></textarea></td>
 			</tr>
 			<tr>
 				<th >交办意见:</th>
-				<td colspan="2"><textarea name="" rows="" cols=""></textarea></td>
+				<td colspan="2"><textarea data-adaptheight name="" rows="" cols=""></textarea></td>
 			</tr>
 			
 		</table>
@@ -34,6 +34,7 @@
 		</div>
 		</div>
 		   <script src="../css/laydate/laydate.js"></script>
+		 	<script src="../js/adjustHeight.js"></script>
 		   <script >
 		   	laydate.skin('blue');
 

WebUI/CallCenterWeb.UI/CommonHtml/Back.html

@@ -45,7 +45,7 @@
 			</tr>
 			<tr>
 				<th class="Importent">回访内容:</th>
-					<td colspan="7"><textarea id="result" name="" rows="" cols=""></textarea></td>
+					<td colspan="7"><textarea data-adaptheight id="result" name="" rows="" cols=""></textarea></td>
 			</tr>
 		</table>
 		<div class="btn_box">
@@ -53,6 +53,7 @@
 			<button class="btns Submit">保存并提交回访</button>
 		</div>
 		</div>
+		<script src="../js/adjustHeight.js"></script>
 		<script>
 			var wid = helper.request.queryString("wid");
 				var State;

WebUI/CallCenterWeb.UI/CommonHtml/BackDatil.html

@@ -14,13 +14,14 @@
 		
 			<tr>
 				<th class="Importent">退回原因:</th>
-					<td colspan="7"><textarea id="result" name="" rows="" cols=""></textarea></td>
+					<td colspan="7"><textarea data-adaptheight id="result" name="" rows="6" cols=""></textarea></td>
 			</tr>
 		</table>
 		<div class="btn_box">
 			<button class="btns BC">保存</button>
 		</div>
 		</div>
+		<script src="../js/adjustHeight.js"></script>
 		<script>
 			var wid = helper.request.queryString("wid");
 			$(document).ready(function() {

WebUI/CallCenterWeb.UI/CommonHtml/Cb.html

@@ -19,10 +19,10 @@
 				  </td>
 				</th>
 			</tr>
-			</tr>
+			
 			<tr>
 				<th class="Importent">督办意见:</th>
-					<td colspan="7"><textarea id="result" name="" rows="" cols=""></textarea></td>
+					<td colspan="7"><textarea data-adaptheight id="result" name="" rows="" cols=""></textarea></td>
 			</tr>
 		</table>
 		<div class="btn_box">
@@ -30,6 +30,7 @@
 
 		</div>
 		</div>
+		<script src="../js/adjustHeight.js"></script>
 		 <script src="../css/laydate/laydate.js"></script>
 		<script>
 				laydate.skin('blue');

WebUI/CallCenterWeb.UI/CommonHtml/Leader.html

@@ -34,7 +34,7 @@
 				</tr>
 				<tr>
 					<th class="Importent">批示内容:</th>
-					<td colspan="2"><textarea  id="superopinion" name="" rows="" cols=""></textarea></td>
+					<td colspan="2"><textarea data-adaptheight id="superopinion" name="" rows="6" cols=""></textarea></td>
 				</tr>
 				<tr>
 					<th>附件上传:</th>
@@ -52,6 +52,7 @@
 			</div>
 		</div>
 		<script src="../css/laydate/laydate.js"></script>
+		<script src="../js/adjustHeight.js"></script>
 		<script>
 			var wid = helper.request.queryString("wid");
 			$(document).ready(function() {

WebUI/CallCenterWeb.UI/CommonHtml/LeaderAdd.html

@@ -77,7 +77,7 @@
 						<tr>
 							<th class="Importent">内容:</th>
 							<td colspan="7">
-								<textarea id="content" name="" rows="" cols="" style="width: 100%;"></textarea>
+								<textarea data-adaptheight id="content" name="" rows="" cols="" style="width: 100%;"></textarea>
 							</td>
 						</tr>
 						<tr>
@@ -153,6 +153,7 @@
 			</div>
 		</div>
 		<script src="../css/laydate/laydate.js"></script>
+		<script src="../js/adjustHeight.js"></script>
 		<script>
 			var wid = helper.request.queryString("wid");
 			var submit;

WebUI/CallCenterWeb.UI/CommonHtml/StrongLawsuit.html

@@ -22,11 +22,11 @@
 			</tr>
 			<tr>
 				<th class="Importent">结案意见:</th>
-				<td><textarea name="" rows="" cols="" id="finalopinion"></textarea></td>
+				<td><textarea data-adaptheight name="" rows="3" cols="" id="finalopinion"></textarea></td>
 			</tr>
 			<tr>
 				<th class="Importent">处理结果:</th>
-				<td><textarea name="" rows="" cols="" id="result"></textarea></td>
+				<td><textarea data-adaptheight name="" rows="3" cols="" id="result"></textarea></td>
 			</tr>
 			
 		</table>
@@ -34,6 +34,7 @@
 			<button class="btns BC ">保存</button>
 		</div>
 		</div>
+		<script src="../js/adjustHeight.js"></script>
 			<script>
 			var wid = helper.request.queryString("wid");
 			$(document).ready(function() {

WebUI/CallCenterWeb.UI/CommonHtml/Supervision_.html

@@ -30,7 +30,7 @@
 			<table>
 				<tr>
 					<th class="Importent title">督查意见:</th>
-					<td><textarea id='overseeopinion' textarea name="" rows="" cols=""></textarea></td>
+					<td><textarea data-adaptheight id='overseeopinion' textarea name="" rows="4" cols=""></textarea></td>
 				</tr>
 				<tr>
 					<th>附件上传:</th>
@@ -48,6 +48,7 @@
 				<button class="btns JC">保存</button>
 			</div>
 		</div>
+		<script src="../js/adjustHeight.js"></script>
 		<script>
 			var wid = helper.request.queryString("wid");
 			var type = helper.request.queryString("type");

WebUI/CallCenterWeb.UI/CommonHtml/Timesq.html

@@ -18,7 +18,7 @@
 			<tr>
 				<th class="Importent">申请延时原因:</th>
 				<td colspan="2">
-					<textarea id="reason" name="" rows="" cols=""></textarea>
+					<textarea data-adaptheight  id="reason" name="" rows="" cols=""></textarea>
 				</td>
 			</tr>
 		</table>
@@ -27,6 +27,7 @@
 		</div>
 		</div>
 		   <script src="../css/laydate/laydate.js"></script>
+		   <script src="../js/adjustHeight.js"></script>
 		   <script >
 		   	laydate.skin('blue');
 

WebUI/CallCenterWeb.UI/CommonHtml/banli.html

@@ -44,7 +44,7 @@
 				</tr>
 				<tr>
 					<th class="Importent">办理内容:</th>
-					<td><textarea id="result" name="" rows="" cols=""></textarea></td>
+					<td><textarea data-adaptheight id="result" name="" rows="" cols=""></textarea></td>
 					<input type="hidden" id="ID"/>
 				</tr>
 
@@ -55,6 +55,7 @@
 			</div>
 		</div>
 		<script src="../css/laydate/laydate.js"></script>
+		<script src="../js/adjustHeight.js" ></script>
 		<script>
 			var wid = helper.request.queryString("wid");
 				var State;

WebUI/CallCenterWeb.UI/CommonHtml/jiaoban.html

@@ -95,7 +95,7 @@
 				</tr>
 				<tr>
 					<th class="Importent">交办意见:</th>
-					<td><textarea id="assignedopinion" name="" rows="" cols=""></textarea></td>
+					<td><textarea data-adaptheight id="assignedopinion" name="" rows="" cols=""></textarea></td>
 					<input type="hidden" id="ID" />
 					<input type="hidden" id="PID" />
 					<input type="hidden" id="Dpment" />
@@ -109,6 +109,7 @@
 		</div>
 		<script src="../css/laydate/laydate.js"></script>
 		<script src="../js/zTree/jquery.ztree.core.js"></script>
+		<script src="../js/adjustHeight.js"></script>
 		<script>
 			var wid = helper.request.queryString("wid");
 			var State;

WebUI/CallCenterWeb.UI/CommonHtml/lawsuits.html

@@ -26,7 +26,7 @@
 				</tr>
 				<tr>
 					<th>结案意见:</th>
-					<td colspan="2"><textarea id="finalopinion" name="" rows="" cols=""></textarea></td>
+					<td colspan="2"><textarea data-adaptheight id="finalopinion" name="" rows="6" cols=""></textarea></td>
 				</tr>
 
 			</table>
@@ -34,6 +34,7 @@
 				<button class="btns">保存</button>
 			</div>
 		</div>
+		<script src="../js/adjustHeight.js"></script>
 		<script>
 			var wid = helper.request.queryString("wid");
 			$(document).ready(function() {

WebUI/CallCenterWeb.UI/CommonHtml/shTime.html

@@ -34,7 +34,7 @@
 			<tr>
 				<th class="Importent">审核意见:</th>
 				<td colspan="2">
-					<textarea id="reason" name="" rows="" cols=""></textarea>
+					<textarea data-adaptheight id="reason" name="" rows="6" cols=""></textarea>
 				</td>
 			</tr>
 			<input type="hidden"id="delayid" />
@@ -44,6 +44,7 @@
 			<button class="btns Noagree">拒绝</button>
 		</div>
 		</div>
+		<script src="../js/adjustHeight.js"></script>
 		   <script src="../css/laydate/laydate.js"></script>
 		   <script >
 		   	laydate.skin('blue');

WebUI/CallCenterWeb.UI/CommonHtml/shizhang.html

@@ -44,7 +44,7 @@
 				</tr>
 				<tr>
 					<th class="Importent">批示内容:</th>
-					<td colspan="2"><textarea  id="superopinion" name="" rows="" cols=""></textarea></td>
+					<td colspan="2"><textarea data-adaptheight id="superopinion" name="" rows="6" cols=""></textarea></td>
 				</tr>
 			</table>
 			<div class="btn_box">
@@ -52,6 +52,7 @@
 			</div>
 		</div>
 		<script src="../css/laydate/laydate.js"></script>
+		<script src="../js/adjustHeight.js"></script>
 		<script>
 			var wid = helper.request.queryString("wid");
 			$(document).ready(function() {

WebUI/CallCenterWeb.UI/CommonHtml/shth.html

@@ -29,7 +29,7 @@
 				</tr>
 				<tr>
 					<th class="Importent">审核意见:</th>
-					<td colspan="2"><textarea  id="Reason" name="" rows="" cols=""></textarea></td>
+					<td colspan="2"><textarea data-adaptheight id="Reason" name="" rows="" cols=""></textarea></td>
 				</tr>
 			</table>
 			<div class="btn_box">
@@ -38,6 +38,7 @@
 			</div>
 		</div>
 		<script src="../css/laydate/laydate.js"></script>
+		<script src="../js/adjustHeight.js"></script>
 		<script>
 			var wid = helper.request.queryString("wid");
 			var state;

WebUI/CallCenterWeb.UI/CommonHtml/tuihuisq.html

@@ -16,7 +16,7 @@
 
 				<tr>
 					<th class="Importent">申请退回原因:</th>
-					<td colspan="2"><textarea  id="backreason" name="" rows="" cols=""></textarea></td>
+					<td colspan="2"><textarea data-adaptheight  id="backreason" name="" rows="" cols=""></textarea></td>
 				</tr>
 			</table>
 			<div class="btn_box">
@@ -24,6 +24,7 @@
 			</div>
 		</div>
 		<script src="../css/laydate/laydate.js"></script>
+		<script src="../js/adjustHeight.js" ></script>
 		<script>
 			var wid = helper.request.queryString("wid");
 			$(document).ready(function() {

WebUI/CallCenterWeb.UI/js/adjustHeight.js

@@ -0,0 +1,57 @@
+//textarea根据文本域内容自动调整高度
+//用法在textarea中直接添加data-adaptheight属性即可
+
+(function() {
+    function adjustHeight(textareaElement, minHeight) {
+        // compute the height difference which is caused by border and outline
+        // 计算因边框和轮廓产生的高度差异
+        var outerHeight = parseInt(window.getComputedStyle(el).height, 10);
+        var diff = outerHeight - el.clientHeight;
+
+        // set the height to 0 in case of it has to be shrinked
+        // 设置高度为0以防需要收缩（高度）
+        el.style.height = 0;
+
+        // set the correct height
+        // el.scrollHeight is the full height of the content, not just the visible part
+        // 设置正确的高度
+        // el.scrollHeight 是文本内容的全部高度，而不仅仅是可见部分的。
+        el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';
+    }
+
+    // we use the "data-adaptheight" attribute as a marker
+    // 我们使用"data-adaptheight"属性作为一个标记
+    var textAreas = document.querySelectorAll('textarea[data-adaptheight]');
+
+    // iterate through all the textareas on the page
+    // 迭代本页所有的文本域
+    for (var i = 0, l = textAreas.length; i < l; i++) {
+        var el = textAreas[i];
+
+        // we need box-sizing: border-box, if the textarea has padding
+        // 如果文本域有边距，我们需要设置box-sizing: border-box
+        el.style.boxSizing = el.style.mozBoxSizing = 'border-box';
+
+        // we don't need any scrollbars, do we? :)
+        // 我们不需要滚动条，不是么？ :)
+        el.style.overflowY = 'hidden';
+
+        // the minimum height initiated through the "rows" attribute
+        // 通过"rows"属性初始化的最小高度
+        var minHeight = el.scrollHeight;
+
+        el.addEventListener('input', function() {
+            adjustHeight(el, minHeight);
+        });
+
+        // we have to readjust when window size changes (e.g. orientation change)
+        // 当窗口大小改变时，我们需要重新调整高度（例如方向变化）
+        window.addEventListener('resize', function() {
+            adjustHeight(el, minHeight);
+        });
+
+        // we adjust height to the initial content
+        // 我们调整初始内容的高度
+        adjustHeight(el, minHeight);
+    }
+}());