1. 程式人生 > >bootstrap模態框傳值問題

bootstrap模態框傳值問題

關於模態框傳值的方法有很多種,這裡我主要記錄下我傳遞的過程。

 <div style="height: 90px;" class="default">
 <p>${receiver.consignee}</p>
  <p>${receiver.phone}</p>
  <p>${receiver.address}</p>
<input type="button" class="btn upd" value="修改" data-toggle="modal" data-target="#addressModal" onclick="editAddress(${receiver.id},this)">
</div>
主要就是點選這個button彈出模態框,讓div中的引數傳遞到模態框中。
<!--修改地址彈出層-->
	<div class="modal fade" id="addressModal" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top:50px; padding-left:0px">
	<form id="saveAddForm" action="${base}/member/order/editAddressInfo.jhtml"  method="post" >
	 <input type="hidden" name="id" value="" id="rid"/>
	<div class="modal-header" style="text-align: center">
	<h3 id="myModalLabel">修改資訊</h3>
	</div>
	<div class="modal-body">
	 <div class="row" style="padding-left:50px">
	    <div class="lable"><b>*</b>姓名</div>
	    <div class="input">
	        <input type="text" name="consignee" id="con" value="" placeholder="姓名"  style="width: 400px;height: 37px; float: left;"/>
	    </div>
	</div>
	 <div class="row" style="padding-left:50px">
	    <div class="lable"><b>*</b>手機</div>
	    <div class="input">
	        <input type="text" name="phone" id="pho"  value="" placeholder="手機" style="width: 400px;height: 37px; float: left;" />
	    </div>
	</div>
	 <div class="row" style="padding-left:50px">
	    <div class="lable"><b>*</b>地址</div>
	    <div class="input">
	        <input type="text"  name="address" id="add" value="" placeholder="地址" style="width: 400px;height: 37px; float: left;"/>
	    </div>
	</div>
	
	<div class="modal-footer" style="text-align: center">
	    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
	    <button type="submit" class="btn btn-primary">儲存</button>
   	</div>
   	</div>
	</form>
	</div>

<!--彈出層結束-->
傳遞引數的js程式碼如下:
//模態框傳值
function editAddress(id,obj){
$("#rid").val(id);
var name=$(obj).parent().find('p')[0];//通過parent()方法返回被選元素的直接父元素,找到第一個P標籤。
var consignee	=$(name).text();      //獲取P標籤中的內容
$("#con").val(consignee);	      //賦值給模態框中的input	
var phone=$(obj).parent().find('p')[1];
var mob=$(phone).text();
$("#pho").val(mob);
var address=$(obj).parent().find('p')[2];
var addr=$(address).text();
$("#add").val(addr);
}